/* new style, behind the switch on the contact page: everything here only applies with html.te */
html.te {
  --accent: #ff5a00;
  --rule: rgba(43, 41, 38, .14);
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
html.te body { font: 14px/1.55 var(--sans); letter-spacing: 0; text-align: left; }
html.te .row { justify-content: flex-start; gap: 4px 24px; }

/* header: small tracked capitals on the grid's left edge, contact on the right */
html.te header { padding-left: calc(var(--gutter) + clamp(14px, 2.5vw, 28px)); padding-right: calc(var(--gutter) + clamp(14px, 2.5vw, 28px)); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
html.te header .row:first-child { justify-content: space-between; }
html.te header .name { font-weight: 500; letter-spacing: .16em; }
html.te header .row + .row { margin-top: 10px; }
html.te header nav a:not(.dim) .ch, html.te header .row:first-child a:not(.name):not(.dim) .ch { --ink: var(--accent); }
html.te header a:hover .ch, html.te header a.dim:hover .ch { --ink: var(--accent); color: var(--accent); }

/* work: left-aligned on the grid, hairline over each spec row */
html.te .frame { max-width: none; margin: 0; }
html.te .cap.spec {
  display: grid; align-items: start;
  grid-template-columns: 3em minmax(0, 2.2fr) minmax(0, .5fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .5fr) minmax(0, .5fr);
  column-gap: 20px; row-gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
}
html.te .spec .no { font: 11px/1.9 var(--mono); color: var(--muted); }
html.te .spec .name { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.4; transition: color .3s; }
html.te .spec .cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.te .spec .k { font: 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.te .spec .v { font: 12px/1.45 var(--mono); }
html.te .reveal:has(.project:hover) .spec .name { color: var(--accent); }
@media (max-width: 899px) {
  html.te .cap.spec { grid-template-columns: 2.4em 1fr 1fr; }
  html.te .spec .name { grid-column: 2 / -1; }
  html.te .spec .cell:nth-child(odd) { grid-column: 2; }
  html.te .spec .cell:nth-child(even) { grid-column: 3; }
}

/* running timecode on the playing preview */
html.te .frame .tc {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font: 11px/1 var(--mono); letter-spacing: .08em; color: var(--cream);
  text-shadow: 0 0 6px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .8s;
}
html.te .frame.cur:has(.preview.live) .tc { opacity: .9; }

/* player close */
html.te .player .close { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
html.te .player .close:hover { color: var(--accent); opacity: 1; }

/* about + contact, on the same left edge */
html.te .portrait { margin: 0 0 28px; }
html.te .about p { margin: 0 0 .8em; max-width: 520px; font-size: 15px; }
html.te #contact .row { gap: 4px 28px; font-size: 15px; }
html.te #contact a:hover { color: var(--accent); }

html.te footer { padding: 14px var(--gutter) 48px; margin-left: 0; }
html.te footer .row { border-top: 1px solid var(--rule); padding-top: 12px; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* smallest phones: keep the menu on one line */
@media (max-width: 359px) {
  html.te header { letter-spacing: .1em; padding-left: calc(var(--gutter) + 6px); padding-right: calc(var(--gutter) + 6px); }
  html.te header .row { gap: 4px 12px; }
}