/* Same menu component as the other portfolio case studies, without unrelated global styles. */
.tenet-portfolio .meta-rail{--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--hand:"Klee One","Instrument Serif",cursive;--gold:#EFD9A0;--on-dark-2:#EDE4D7;--on-dark-meta:#BDB1A1;font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;line-height:normal}
.meta-rail { border-left: 1px solid rgba(237,228,215,0.16); padding-left: 28px; display: flex; flex-direction: column; gap: 16px; font-size: 13.5px; color: var(--on-dark-2); }
.meta-rail .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--on-dark-meta); display: block; margin-bottom: 3px; }
.meta-rail .v { font-weight: 500; }
.meta-rail .k { font-size: 10px; }
/* case-study details as a café menu board: label, dotted leader, value */
.meta-rail, .menu-board { position: relative; border: 1.5px solid rgba(239,217,160,0.5); border-radius: 10px; padding: 18px 20px 14px; background: rgba(0,0,0,0.14); align-self: start; }
.menu-board .meta-rail { border: 0; padding: 0; background: none; }
.meta-rail::before, .menu-board::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(239,217,160,0.2); border-radius: 7px; pointer-events: none; }
.menu-board .meta-rail::before { display: none; }
.menu-head { margin: -2px 0 6px; text-align: center; font: 600 15px var(--hand, 'Klee One', cursive); color: var(--gold); letter-spacing: 0.02em; }
.menu-head span { position: relative; padding: 0 12px; }
.menu-head span::before, .menu-head span::after { content: "\2726"; position: absolute; top: 3px; font-size: 9px; color: rgba(239,217,160,0.7); }
.menu-head span::before { left: -4px; } .menu-head span::after { right: -4px; }
.meta-rail { display: flex; flex-direction: column; gap: 2px; }
.meta-rail > div { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; }
.meta-rail > div::after { content: ""; order: 1; flex: 1 1 18px; min-width: 18px; border-bottom: 1.5px dotted rgba(239,217,160,0.42); transform: translateY(-4px); }
.meta-rail .k, .meta-rail dt { order: 0; flex: none; margin: 0; }
.meta-rail .v, .meta-rail dd { order: 2; flex: 0 1 auto; max-width: 68%; margin: 0; text-align: right; }
@media (max-width: 860px) {
  .meta-rail, .menu-board { border: 1.5px solid rgba(239,217,160,0.5); padding: 18px 18px 12px; }
  .meta-rail { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .menu-board .meta-rail { border: 0; padding: 0; }
}
@media (max-width: 560px) {
  /* narrow screens: stack label over value; the dotted leader is decoration and only earns its place on one line */
  .meta-rail > div { display: block; padding: 6px 0; }
  .meta-rail > div::after { display: none; }
  .meta-rail .k, .meta-rail dt { display: block; margin-bottom: 2px; }
  .meta-rail .v, .meta-rail dd { display: block; max-width: none; text-align: left; }
}