/* ==========================================================================
   JMI TEAM MEMBER CARD
   Mobile first. Desktop is the enhancement, not the baseline.
   ========================================================================== */

.jmi-card{width:100%;margin:0 auto;background:var(--ivory);position:relative}
.jmi-card img{display:block;max-width:100%}
.jmi-card h1,.jmi-card h2,.jmi-card h3{font-family:var(--font-display);font-weight:400;line-height:1.15}

.jmi-card .eyb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:#7A6224;display:flex;align-items:center;gap:10px;margin:0}
.jmi-card .eyb::after{content:"";flex:1;height:1px;background:rgba(201,162,74,.5)}

/* ── Identity ── */
.card-top{background:var(--green-deep);padding:40px 24px 0;text-align:center;position:relative}
.card-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(201,162,74,.4)}
.card-brand{height:34px;width:auto;margin:0 auto 26px;opacity:.95}
.card-shot{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  margin:0 auto;border:3px solid var(--brand-accent);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.card-top h1{font-size:31px;color:var(--ivory);margin-top:20px}
.card-role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--brand-accent);margin-top:9px}
.card-org{font-size:13px;color:rgba(242,239,230,.7);margin-top:8px;padding-bottom:30px}

/* ── Primary actions ── */
.acts{background:var(--green);padding:22px 18px 26px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:80px;padding:14px 8px;border:1px solid rgba(242,239,230,.28);color:var(--ivory);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-align:center;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.act svg{width:22px;height:22px;stroke:var(--brand-accent);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s var(--ease)}
.act:hover,.act:active,.act:focus-visible{background:var(--brand-accent);border-color:var(--brand-accent);
  color:var(--green-deep)}
.act:hover svg,.act:active svg,.act:focus-visible svg{stroke:var(--green-deep)}
.act.wide{grid-column:1 / -1;flex-direction:row;min-height:60px;gap:12px;
  background:var(--brand-accent);border-color:var(--brand-accent);color:var(--green-deep)}
.act.wide svg{stroke:var(--green-deep)}
.act.wide:hover,.act.wide:active{background:transparent;color:var(--brand-accent);
  border-color:var(--brand-accent)}
.act.wide:hover svg,.act.wide:active svg{stroke:var(--brand-accent)}

/* ── Sections ── */
.csec{padding:38px 24px}
.csec.light{background:var(--ivory)}
.csec.stone{background:var(--stone)}
.csec h2{font-size:24px;margin-top:14px}
.csec p{font-size:15px;color:var(--muted);margin-top:14px}
.jmi-card .needed{background:rgba(201,162,74,.22);border-bottom:1px dashed var(--brand-accent);padding:0 4px}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--green);
  border:1px solid rgba(31,91,71,.3);padding:9px 13px}

/* ── Detail rows ── */
.rows{margin-top:22px;border-top:1px solid rgba(31,91,71,.18)}
.row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;color:inherit;min-height:56px;
  border-bottom:1px solid rgba(31,91,71,.18)}
.row svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;stroke:var(--green);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.row .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--quiet);display:block}
.row .v{font-size:15px;color:var(--ink);margin-top:3px;display:block}
.row .v small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.row:active{background:rgba(201,162,74,.12)}

/* ── Portfolio rail ── */
.rail{display:flex;gap:14px;overflow-x:auto;margin:22px -24px 0;padding:0 24px 8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.proj{flex:0 0 236px;scroll-snap-align:start;background:#fff;padding:0;font:inherit;text-align:left;
  cursor:pointer;display:block;color:inherit;border:1px solid rgba(31,91,71,.16);
  transition:border-color .3s var(--ease)}
.proj:hover,.proj:active,.proj:focus-visible{border-color:var(--brand-accent)}
.proj .im{position:relative;display:block;height:150px;overflow:hidden;background:var(--green-deep)}
.proj .im img{width:100%;height:100%;object-fit:cover}
.proj .cue{position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:30px;
  background:rgba(23,63,50,.72);border:1px solid rgba(201,162,74,.6);display:flex;
  align-items:center;justify-content:center}
.proj .cue svg{width:14px;height:14px;stroke:var(--brand-accent);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.proj .bd{display:block;padding:15px 16px 18px}
.proj .pn{font-family:var(--font-display);font-size:17px;display:block;line-height:1.2}
.proj .mt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);
  margin-top:6px;display:block}
.hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
  margin-top:14px;display:flex;align-items:center;gap:8px}

/* ── Close ── */
.card-end{background:var(--ivory);padding:40px 24px 59px;text-align:center;
  border-top:1px solid rgba(31,91,71,.16)}
.card-end .eyb{color:#7A6224;justify-content:center}
.card-end .eyb::after{display:none}
.card-end h2{font-size:23px;color:var(--ink);max-width:16ch;margin:14px auto 0}
.cbtn{display:block;margin-top:24px;background:var(--brand-accent);
  border:1px solid var(--brand-accent);color:var(--green-deep);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:18px;
  min-height:56px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.cbtn:hover,.cbtn:active{background:transparent;color:#7A6224}
.cbtn.alt{background:transparent;color:var(--green);border:1px solid rgba(31,91,71,.35);margin-top:11px}
.cbtn.alt:hover,.cbtn.alt:active{background:var(--green);color:var(--ivory);border-color:var(--green)}
.fine{font-size:11px;color:var(--quiet);margin-top:26px;line-height:1.8}

/* ── Sticky thumb bar ── */
.tbar{position:sticky;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:rgba(23,63,50,.97);border-top:1px solid rgba(201,162,74,.4);
  padding-bottom:env(safe-area-inset-bottom)}
@supports (backdrop-filter:blur(10px)){.tbar{backdrop-filter:blur(10px)}}
.tbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:13px 4px 16px;min-height:62px;color:var(--ivory);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700}
.tbar a + a{border-left:1px solid rgba(242,239,230,.16)}
.tbar svg{width:19px;height:19px;stroke:var(--brand-accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tbar a:active,.tbar a:focus-visible{background:var(--brand-accent);color:var(--green-deep)}
.tbar a:active svg,.tbar a:focus-visible svg{stroke:var(--green-deep)}

/* ── Project sheet ── */
.sheet-src{display:none}
.sheet{position:fixed;inset:0;z-index:1000;display:none}
/* Guard. Nothing in a layout rule should be able to knock this out of fixed. */
.jmi-card .sheet{position:fixed}
.sheet.open{display:block}
.sheet-scrim{position:absolute;inset:0;background:rgba(15,32,26,.9);opacity:0;
  transition:opacity .3s var(--ease)}
.sheet.open .sheet-scrim{opacity:1}
.sheet-panel{position:absolute;left:50%;transform:translate(-50%,100%);width:100%;max-width:520px;
  top:0;bottom:0;background:var(--ivory);display:flex;flex-direction:column;
  transition:transform .38s var(--ease)}
.sheet.open .sheet-panel{transform:translate(-50%,0)}
.sheet-close{position:absolute;top:14px;right:14px;z-index:8;width:44px;height:44px;cursor:pointer;
  border:1px solid rgba(242,239,230,.5);background:rgba(23,63,50,.6);color:var(--ivory);font-size:17px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.sheet-close:hover,.sheet-close:active{background:var(--brand-accent);color:var(--green-deep)}

.gal{position:relative;flex:0 0 auto;height:270px;background:var(--green-deep);overflow:hidden;
  touch-action:pan-y}
.shot-i{position:absolute;inset:0;opacity:0;transition:opacity .38s var(--ease)}
.shot-i.on{opacity:1}
.shot-i img{width:100%;height:100%;object-fit:cover}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;
  cursor:pointer;border:1px solid rgba(242,239,230,.4);background:rgba(23,63,50,.5);
  color:var(--ivory);font-size:16px;transition:background .3s var(--ease),color .3s var(--ease)}
.gal-arrow:hover,.gal-arrow:active{background:var(--brand-accent);color:var(--green-deep)}
.gp{left:10px}
.gn{right:10px}
.dots{position:absolute;left:0;right:0;bottom:12px;z-index:5;display:flex;justify-content:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(242,239,230,.4);border:0;padding:0;
  cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.dot.on{background:var(--brand-accent);transform:scale(1.35)}
.gcount{position:absolute;left:14px;bottom:10px;z-index:5;color:var(--brand-accent);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700}

.sheet-body{flex:1;overflow-y:auto;padding:26px 24px 40px;-webkit-overflow-scrolling:touch}
.sheet-body h3{font-family:var(--font-display);font-size:26px;margin-top:12px}
.sheet-body .sum{font-size:15px;color:var(--muted);margin-top:14px}
.sp{list-style:none;margin-top:26px;padding:0;border-top:1px solid rgba(31,91,71,.2)}
.sp li{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:13px 0;font-size:14px;
  border-bottom:1px solid rgba(31,91,71,.2)}
.sp .k{letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:700;color:var(--quiet)}
.sheet-cta{display:block;margin-top:26px;background:var(--brand-accent);color:var(--green-deep);
  text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:17px;min-height:54px}

/* ==========================================================================
   TABLET. Wider single column, denser actions, two-up portfolio.
   ========================================================================== */
@media (min-width:640px){
  .jmi-card{max-width:none;width:100%}
  .card-top{padding:56px 40px 0}
  .card-shot{width:176px;height:176px}
  .card-top h1{font-size:38px}
  .acts{padding:26px 30px 32px;grid-template-columns:repeat(4,1fr)}
  .act.wide{grid-column:1 / -1}
  .csec{padding:48px 40px}
  .csec h2{font-size:28px}
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 0;padding:0;overflow:visible}
  .proj{flex:none}
  .proj .im{height:170px}
  .hint{display:none}
  .card-end{padding:52px 40px 64px}
  .cbtn{display:inline-block;min-width:260px;margin-left:6px;margin-right:6px}
  .sheet-panel{max-width:720px;top:50%;left:50%;bottom:auto;height:min(860px,92vh);
    transform:translate(-50%,-46%);opacity:0;
    transition:transform .38s var(--ease),opacity .38s var(--ease)}
  .sheet.open .sheet-panel{transform:translate(-50%,-50%);opacity:1}
  .gal{height:320px;flex:0 0 320px}
  .sheet-body{display:flex;flex-direction:column;padding:34px 40px 36px}
  .sheet-cta{margin-top:auto}
}

/* ==========================================================================
   DESKTOP. Dark contact rail on the left, content on the right.
   Markup order is unchanged, so mobile reading order is preserved.
   ========================================================================== */
@media (min-width:1024px){
  .jmi-card{max-width:none;width:100%;position:relative;display:grid;
    grid-template-columns:400px 1fr;grid-template-rows:auto auto 1fr}

  /* Fills the left column below the last rail item */
  .jmi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:400px;
    background:var(--green-deep);z-index:0}
  /* Lift the grid items above the rail. Never use a blanket child selector here,
     it overrides position:fixed on the sheet and drops it into flow. */
  .jmi-card > .card-top,
  .jmi-card > .acts,
  .jmi-card > .csec,
  .jmi-card > .card-end{position:relative;z-index:1}

  .card-top       {grid-column:1;grid-row:1;align-self:start;padding:60px 36px 0}
  .acts           {grid-column:1;grid-row:2;align-self:start}
  .csec--details  {grid-column:1;grid-row:3;align-self:start}
  .csec--bio      {grid-column:2;grid-row:1}
  .csec--work     {grid-column:2;grid-row:2}
  .card-end       {grid-column:2;grid-row:3}

  .card-top::after{display:none}
  .card-shot{width:190px;height:190px}
  .card-top h1{font-size:40px;margin-top:24px}
  .card-org{padding-bottom:34px}

  .acts{padding:0 36px 30px;background:var(--green-deep);grid-template-columns:1fr 1fr;gap:10px}
  .act{min-height:74px}
  .act.wide{min-height:58px}

  /* Details rows invert onto the dark rail */
  .csec.csec--details{background:transparent;padding:30px 36px 60px}
  .csec.csec--details .eyb{color:var(--brand-accent)}
  .csec.csec--details .eyb::after{background:rgba(201,162,74,.45)}
  .csec.csec--details .rows{border-top-color:rgba(242,239,230,.2)}
  .csec.csec--details .row{border-bottom-color:rgba(242,239,230,.2)}
  .csec.csec--details .row svg{stroke:var(--brand-accent)}
  .csec.csec--details .row .k{color:rgba(242,239,230,.55)}
  .csec.csec--details .row .v{color:var(--ivory)}
  .csec.csec--details .row .v small{color:rgba(242,239,230,.7)}
  .csec.csec--details .row:hover{background:rgba(242,239,230,.06)}

  .csec--bio{padding:64px 56px 56px}
  .csec--bio h2{font-size:34px;max-width:20ch}
  .csec--bio p{font-size:16px;max-width:62ch}
  .csec--bio .chips{max-width:62ch}

  .csec--work{padding:56px}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1100px}
  .proj .im{height:158px}
  .proj:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(23,63,50,.16)}
  .proj{transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}

  .card-end{padding:64px 56px 72px}
  .card-end h2{font-size:30px;max-width:20ch}
  .card-end .fine{max-width:40ch;margin-left:auto;margin-right:auto}
  .cbtn{min-width:280px}

  /* The thumb bar is a phone affordance. Actions stay visible in the rail here. */
  .tbar{display:none}

  /* Landscape panel. Height is fixed so both columns match, and the detail
     column is sized to hold a full five-row spec without scrolling. */
  .sheet-panel{max-width:1060px;top:50%;left:50%;bottom:auto;
    height:min(740px,90vh);max-height:none;flex-direction:row;
    transform:translate(-50%,-44%) scale(.98);opacity:0;
    transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .sheet.open .sheet-panel{transform:translate(-50%,-50%) scale(1);opacity:1}

  .gal{flex:0 0 54%;height:100%;min-height:0}

  .sheet-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    padding:46px 42px 40px;overflow-y:auto}
  .sheet-body h3{font-size:30px;margin-top:10px}
  .sheet-body .sum{font-size:15px;margin-top:12px}
  .sp{margin-top:22px}
  .sp li{padding:12px 0}
  /* Pins the button to the bottom of the column, so it is always in view */
  .sheet-cta{margin-top:auto}

  /* Close sits over the light column here, so it reads as ink not as a dark block */
  .sheet-close{top:16px;right:16px;background:transparent;color:var(--quiet);
    border-color:rgba(31,91,71,.28)}
  .sheet-close:hover,.sheet-close:active{background:var(--brand-accent);
    color:var(--green-deep);border-color:var(--brand-accent)}
}

@media (min-width:1280px){
  .jmi-card{grid-template-columns:430px 1fr}
  .jmi-card::before{width:430px}
  .rail{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1360px}
  .csec--bio{padding:72px 64px 60px}
  .csec--work,.card-end{padding-left:64px;padding-right:64px}
}

@media (prefers-reduced-motion:reduce){
  .jmi-card *,.sheet *{transition:none !important;animation:none !important}
}