/* Team · rhythm — the head beside two photographs, then the year by cadence: one row per cadence (its rituals, a strip
   across the twelve months, what it leaves behind, who), a months axis and a line at today (partials/team/rhythm.php).
   The strip column sits between --tm-lab and --tm-kv; the today line is placed with the same arithmetic. On phones
   each row stacks and its strip carries its own month letters and today tick. */
.tm-rh__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--bdh-gap-l);align-items:center;margin-bottom:var(--bdh-head-mb)}
.tm-rh__head{display:flex;flex-direction:column;gap:18px}
.tm-rh__head .h2{max-width:16ch}
.tm-rh__link{margin-top:6px;min-height:40px}

.tm-rh__photos{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.tm-rh__fig{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.tm-rh__fig--1{grid-column:1 / 11;grid-row:1}
.tm-rh__fig--2{grid-column:8 / 13;grid-row:1;align-self:end;margin-bottom:-42px;position:relative;z-index:2}
.tm-rh__ph{aspect-ratio:4/3}
.tm-rh__fig--2 .tm-rh__ph{aspect-ratio:3/2;box-shadow:0 0 0 6px var(--paper),var(--sh-2)}
.band--alt .tm-rh__fig--2 .tm-rh__ph{box-shadow:0 0 0 6px var(--paper-2),var(--sh-2)}
.tm-rh__fig--1 .tm-rh__cap{max-width:58%}
.tm-rh__cap{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;line-height:1.45;color:var(--muted)}

.tm-rh__card{--tm-pad:24px;--tm-gap:24px;--tm-lab:.29;--tm-kv:.25;position:relative;margin-top:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-1);overflow:hidden}
.tm-rh__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--tm-pad);border-bottom:1px solid var(--line-2)}
.tm-rh__bt,.tm-rh__yr{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tm-rh__yr{color:var(--faint)}
.tm-rh__body{position:relative;padding:0 var(--tm-pad) 10px}
.tm-rh__axis,.tm-rh__row{display:grid;grid-template-columns:calc((100% - 2 * var(--tm-gap)) * var(--tm-lab)) minmax(0,1fr) calc((100% - 2 * var(--tm-gap)) * var(--tm-kv));column-gap:var(--tm-gap)}
.tm-rh__axis{height:54px;align-items:end}
.tm-rh__months{position:relative;height:100%}
.tm-rh__months span,.tm-rh__mm span{position:absolute;bottom:8px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--faint);transform:translateX(2px)}
.tm-rh__months span{bottom:24px}   /* the month letters ride high, so the today label below them never covers one */
.tm-rh__rows{display:flex;flex-direction:column}
.tm-rh__row{align-items:center;padding:18px 0;border-top:1px solid var(--line-2)}
.tm-rh__lab{display:flex;flex-direction:column;gap:6px;min-width:0}
.tm-rh__freq{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;line-height:1.25;color:var(--ink)}
.tm-rh__rit{display:flex;flex-direction:column;gap:2px;font-size:var(--t-xs);line-height:1.5;color:var(--muted)}
.tm-rh__strip{position:relative;height:30px;align-self:center}
.tm-rh__track{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);transform:translateY(-50%)}
.tm-rh__svg{position:absolute;inset:4px 0;width:100%;height:calc(100% - 8px)}
.tm-rh__pr{fill:var(--blue)}
.tm-rh__pr--day{fill:var(--blue-line)}
.tm-rh__mark{position:absolute;top:5px;bottom:5px;border-radius:4px;background:var(--blue);min-width:6px}
.tm-rh__mark--tick{top:7px;bottom:7px;border-radius:2px;min-width:4px}
.tm-rh__tick,.tm-rh__mm{display:none}
.tm-rh__kv{display:flex;flex-direction:column;gap:8px;min-width:0}
.tm-rh__kv div{display:flex;flex-direction:column;gap:3px}
.tm-rh__kv dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.tm-rh__kv dd{font-size:var(--t-xs);line-height:1.5;color:var(--txt)}

/* the line at today, across every strip: it starts under the month letters, its label on the line between them and the
   first row */
.tm-rh__today{position:absolute;top:54px;bottom:10px;width:0;left:calc(var(--tm-pad) + (100% - 2 * var(--tm-pad) - 2 * var(--tm-gap)) * var(--tm-lab) + var(--tm-gap) + (100% - 2 * var(--tm-pad) - 2 * var(--tm-gap)) * (1 - var(--tm-lab) - var(--tm-kv)) * var(--x,0));
  border-left:1.5px solid var(--ink);pointer-events:none}
.tm-rh__today span{position:absolute;top:0;left:0;transform:translate(-50%,-50%);padding:2px 8px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;line-height:1.5;white-space:nowrap}

@media (max-width:1023px){
  .tm-rh__top{grid-template-columns:minmax(0,1fr);gap:40px}
  .tm-rh__card{--tm-lab:.32;--tm-kv:.26}
}
@media (max-width:760px){
  .tm-rh__photos{margin-bottom:42px}
  .tm-rh__fig--1 .tm-rh__cap{max-width:60%}
  .tm-rh__card{--tm-pad:18px}
  .tm-rh__axis,.tm-rh__today{display:none}
  .tm-rh__row{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:20px 0}
  .tm-rh__row:first-child{border-top:0}
  .tm-rh__strip{height:46px}
  .tm-rh__track{top:15px}
  .tm-rh__svg{inset:4px 0 auto;height:22px}
  .tm-rh__mark{top:6px;bottom:auto;height:18px}
  .tm-rh__mark--tick{top:8px;height:14px}
  .tm-rh__tick{display:block;position:absolute;top:0;height:30px;width:0;border-left:1.5px solid var(--ink)}
  .tm-rh__mm{display:block;position:absolute;left:0;right:0;bottom:0;height:14px}
  .tm-rh__mm span{bottom:0}
  /* what it leaves behind and who: always side by side, so every cadence reads the same way */
  .tm-rh__kv{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
}