html {
  background: var(--outside);
  scrollbar-gutter: stable;
}

body.hub {
  margin: 0;
  font: var(--paragraph-font);
  color: var(--ink);
  background: var(--panel);
  min-height: 100vh;
  display: grid;
  grid-template-rows: calc(var(--bar) + var(--stroke)) auto 1fr auto;

  b,
  strong {
    font-weight: 500;
  }

  max-width: calc(var(--content) + 2*var(--content-edge) + var(--side) + .25rem);
  margin: 0 auto;
  border-left: var(--line);
  border-right: var(--line);
}

body.hub,
body.hub * {
  box-sizing: border-box;
}

body.hub a {
  color: inherit;
  text-decoration: none;
}

body.hub a:not([class]):where(:not(.hub-bar *,.hub-flashes *,.hub-foot *)) {
  color: var(--fill);
}

body.hub a:not([class]):where(:not(.hub-bar *,.hub-flashes *,.hub-foot *)):hover,
body.hub a:not([class]):where(:not(.hub-bar *,.hub-flashes *,.hub-foot *)):focus-visible {
  text-decoration: underline;
}

body.hub button {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

body.hub.bare {
  display: block;
  max-width: calc(var(--content) + 2*var(--content-edge));
  border: 0;
  background: #fff;
}

body.hub.bare main.bare .paper {
  min-height: 100vh;
}

.hub-bar {
  display: grid;
  grid-template-columns: auto 1fr var(--side);
  align-items: center;
  height: calc(var(--bar) + var(--stroke));
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--tint);
  border-bottom: var(--line);
}

.hub-bar .studio {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-xl);
  font: 500 var(--text-md)/1 var(--ui);
  color: var(--ink);
  white-space: nowrap;
}

.hub-bar .studio {
  font: var(--item-title-font);
  gap: 0;
  padding: 0 var(--space-xl);
}

.hub-bar .studio:has(img.icon) {
  padding-left: 0;
}

.hub-bar .studio img.icon {
  box-sizing: border-box;
  height: 100%;
  width: calc(2.5rem + 2*var(--space-lg-xl) + var(--stroke));
  padding: calc((var(--bar) - 2.5rem)/2) var(--space-lg-xl);
  border-right: var(--line);
  object-fit: contain;
  display: block;
  flex: none;
}

.hub-bar .studio img.icon+span {
  padding-left: var(--space-xl);
}

.hub-bar .studio img {
  height: var(--lockup-h);
  width: auto;
  max-width: var(--lockup-w);
  object-fit: contain;
  display: block;
}

.hub-bar .studio span {
  display: block;
  max-width: var(--lockup-w);
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-md);
  padding: 0 var(--space-xl);
  white-space: nowrap;
  min-width: 0;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--ink2);
}

.crumb i {
  font-style: normal;
  color: var(--field);
}

.crumb {
  overflow: hidden;
}

.crumb a,
.crumb span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb .here {
  flex-shrink: 0;
}

.crumb .here {
  color: var(--ink);
}

.crumb a:hover {
  color: var(--ink);
}

.crumb .back {
  display: none;
}

.crumb .back i {
  color: var(--acting);
  margin-right: var(--space-xxs);
}

.hub-bar.narrow .crumb>:not(.back) {
  display: none;
}

.hub-bar.narrow .crumb .back {
  display: block;
}

.hub-bar .who {
  display: grid;
  grid-template-columns: minmax(0,1fr) max-content;
  align-items: center;
  height: 100%;
  column-gap: var(--space-lg);
  padding: 0 var(--space-xl);
  border-left: var(--line);
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--ink2);
  white-space: nowrap;
  min-width: 0;
}

.hub-bar .who span {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  min-width: 0;
}

.hub-bar .who form {
  margin: 0;
}

.hub-bar .who.two {
  grid-template-columns: minmax(0,1fr) max-content max-content;
}

.hub-bar .who.anon {
  grid-template-columns: max-content;
  justify-content: end;
}

.hub-bar .who a {
  color: var(--acting);
}

.hub-bar .who a:hover {
  color: var(--ink);
}

.hub-bar .who button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--acting);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.hub-bar .who button:hover {
  color: var(--ink);
}

body.hub.profile {
  grid-template-rows: calc(var(--bar) + var(--stroke)) auto 1fr auto;
}

body.profile .hub-bar {
  grid-template-columns: auto 1fr auto;
}

.hub-bar .session {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-xl);
}

.hub-bar .session .go {
  width: auto;
  height: var(--fh);
  margin: 0;
}

.hub-bar .session .go:hover {
  background: var(--ink);
}

.room {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--side);
  align-items: stretch;
}

.room.one {
  grid-template-columns: minmax(0,1fr);
}

.door {
  padding: var(--space-xxxl) var(--content-edge);
  max-width: calc(var(--side) + 2*var(--content-edge));
}

.door h1 {
  font: var(--title-font);
  margin: 0 0 var(--space-md);
}

.door p {
  margin: 0 0 var(--space-lg-xl);
  color: var(--ink2);
}

:is(.door,.door form,.status,.wide,.how,.how form,.side .run)>:last-child {
  margin-bottom: 0;
}

.door ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.door ul.plain li {
  padding: var(--space-md) 0;
  border-top: var(--line);
}

.link-landing {
  padding: var(--space-xl) var(--content-edge);
  font-size: var(--text-md);
}

.side {
  background: var(--panel);
  border-left: var(--line);
  padding-bottom: var(--space-xxxxl);
}

.status {
  padding: var(--space-xxxxl) var(--space-xl) var(--space-xxxxl);
}

.status .sum {
  font: var(--sum-font-lg);
  color: var(--ink);
  margin-bottom: var(--space-sm-md);
}

.status .when {
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: var(--space-sm-md);
}

.status .when b {
  font-weight: 400;
  color: var(--ink2);
  margin-right: var(--space-sm);
}

.status .sub {
  font-size: var(--text-sm);
  color: var(--ink2);
  margin-bottom: var(--space-md-lg);
  line-height: 1.6;
}

.status dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  font-size: var(--text-sm);
}

.status dt {
  color: var(--ink2);
  white-space: nowrap;
}

.status dd {
  margin: 0;
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.status dd.t {
  font-family: var(--ui);
}

.status[data-state=paid] .when b {
  color: var(--acting);
}

.side .head {
  padding: 0 var(--space-xl) var(--space-sm-md);
  border-bottom: var(--line);
  font: var(--eyebrow-font);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink3);
}

.side .run {
  padding-bottom: var(--space-xxxxl);
}

.side .run:has(>.note:last-child,>.facts:last-child) {
  padding-bottom: var(--space-xxl);
}

.door .run .head {
  padding: var(--space-xxl) var(--space-xl) var(--space-sm-md);
  border-bottom: var(--line);
  font: var(--eyebrow-font);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink3);
}

.side .note {
  padding: 0 var(--space-xl) var(--space-xxl);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink2);
}

.side .note.after {
  font-size: var(--text-sm);
}

.pick .opt {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--fh);
  padding: 0 var(--space-xl);
  border-bottom: var(--line);
  font-size: var(--text-md);
  color: var(--ink);
  cursor: pointer;
}

.pick .opt:hover {
  background: var(--tint);
}

.pick .opt:has(input:checked) {
  background: #fff;
  font-weight: 500;
}

.pick .opt input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--acting);
  cursor: pointer;
}

.pick .opt:has(input:focus-visible) {
  outline: var(--stroke) solid var(--ink);
  outline-offset: -.25rem;
}

.pick .opt .pref {
  margin-left: auto;
  font: 400 var(--text-xs)/1 var(--ui);
  color: var(--ink3);
}

.how {
  display: none;
  padding: 0 var(--space-xl);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink2);
}

.how.open {
  display: block;
}

.ways.every .how {
  padding-bottom: var(--space-lg-xl);
}

.ways.every .how+.head {
  border-top: var(--line);
}

.pick:has(.opt:nth-child(1) input:checked)~.how[data-n="1"],
.pick:has(.opt:nth-child(2) input:checked)~.how[data-n="2"],
.pick:has(.opt:nth-child(3) input:checked)~.how[data-n="3"],
.pick:has(.opt:nth-child(4) input:checked)~.how[data-n="4"],
.pick:has(.opt:nth-child(5) input:checked)~.how[data-n="5"],
.pick:has(.opt:nth-child(6) input:checked)~.how[data-n="6"],
.pick:has(.opt:nth-child(7) input:checked)~.how[data-n="7"],
.pick:has(.opt:nth-child(8) input:checked)~.how[data-n="8"],
.pick:has(.opt:nth-child(9) input:checked)~.how[data-n="9"],
.pick:has(.opt:nth-child(10) input:checked)~.how[data-n="10"],
.pick:has(.opt:nth-child(11) input:checked)~.how[data-n="11"],
.pick:has(.opt:nth-child(12) input:checked)~.how[data-n="12"] {
  display: block;
}

.pick {
  margin-bottom: var(--space-lg-xl);
}

.pick:has(+.head) {
  margin-bottom: var(--space-xxl);
}

.how b {
  color: var(--ink);
  font-weight: 500;
}

.how p {
  margin: 0 0 var(--space-md);
}

.how p:last-child {
  margin-bottom: 0;
}

.how form {
  margin: 0;
}

.kv {
  margin: 0 0 var(--space-lg-xl);
}

.kv:has(+form) {
  margin-bottom: var(--space-lg);
}

.kv:has(+p) {
  margin-bottom: var(--space-lg);
}

.kv dt {
  font: 500 var(--text-sm)/1.6 var(--ui);
  color: var(--ink);
}

.kv dd {
  margin: 0 0 var(--space-lg);
  overflow-wrap: anywhere;
}

.kv dd:last-child {
  margin-bottom: 0;
}

.kv dd.c {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}

.kv dd.c button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--acting);
}

.kv dd.c button:hover {
  color: var(--ink);
}

.kv dd.c .show {
  margin-left: auto;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--acting);
  cursor: pointer;
  position: relative;
}

.kv dd.c .show:hover {
  color: var(--ink);
}

.kv dd.c .show input {
  position: absolute;
  opacity: 0;
  width: .0625rem;
  height: .0625rem;
  margin: 0;
}

.kv dd.c .show+button {
  margin-left: 0;
}

.kv dd.c .full,
.kv dd.c:has(.show input:checked) .part,
.kv dd.c:has(.show input:checked) .show .on {
  display: none;
}

.kv dd.c:has(.show input:checked) .full,
.kv dd.c:has(.show input:checked) .show .off {
  display: inline;
}

.kv dd.c .show .off {
  display: none;
}

.pe {
  margin: 0 0 var(--space-xl);
}

.how p:has(+.pe) {
  margin-bottom: var(--space-xl);
}

.pe:empty {
  display: none;
}

.pe .pe-noscript {
  margin: 0;
  color: var(--ink2);
}

.pe-error {
  margin: 0 0 var(--space-md);
  color: var(--late);
  font-size: var(--text-sm);
}

.pe-known {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-lg);
}

.pe-known .f {
  margin: 0;
}

.pe-known .f.w {
  grid-column: 1 / -1;
}

.pe-known .f>span {
  display: block;
  font: var(--label-font);
  color: var(--ink);
  margin-bottom: var(--space-xs-sm);
}

.pe-known .f>i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fh);
  padding: 0 var(--space-md);
  font: var(--row-font);
  font-style: normal;
  color: var(--ink);
  background: #fff;
  border: var(--line);
}

.pe-known .f>i form {
  margin: 0;
}

.pe-known .f>i button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--acting);
}

.pe-known .f>i button:hover {
  color: var(--ink);
}

.fee {
  margin: 0 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--space-xs-sm);
  font-size: var(--text-sm);
}

.fee .k {
  color: var(--ink2);
}

.fee .v {
  text-align: right;
  font-family: var(--mono);
  color: var(--ink);
}

.fee .t {
  padding-top: var(--space-sm);
  border-top: var(--line);
  font-weight: 500;
}

.fee .t.v {
  font-size: var(--text-md);
}

.how .nofee {
  margin: 0 0 var(--space-xl);
  color: var(--ink);
}

.pick .opt .add {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--ink2);
}

.pick .opt .add+.pref {
  margin-left: var(--space-md);
}

.run.verify .how {
  display: block;
  padding-bottom: var(--space-xxl);
}

.run.verify .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-lg);
}

.run.verify .two .f {
  min-width: 0;
}

.hub .f {
  display: block;
  margin: 0 0 var(--space-md);
}

.hub .f>span {
  display: block;
  font: var(--label-font);
  color: var(--ink);
  margin-bottom: var(--space-xs-sm);
}

.hub .f>span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink3);
  margin-left: var(--space-xs);
}

.hub .f input {
  width: 100%;
  height: var(--fh);
  padding: 0 var(--space-md);
  font: var(--row-font);
  color: var(--ink);
  background: #fff;
  border: var(--line);
  border-radius: 0;
}

.hub .f input:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--highlight);
}

.hub .f textarea {
  width: 100%;
  min-height: calc(2 * 1.5 * .9375rem + 1.5rem + .25rem);
  padding: var(--space-md);
  font: var(--paragraph-font);
  color: var(--ink);
  background: #fff;
  border: var(--line);
  border-radius: 0;
  resize: none;
  display: block;
  field-sizing: content;
}

.hub .f textarea:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--highlight);
}

.hub .f.err>span {
  color: var(--late);
}

.hub .f.err input {
  border-color: var(--late);
}

.hub .f .msg {
  display: block;
  margin-top: var(--space-xs-sm);
  font-size: var(--text-sm);
  color: var(--late);
}

.hub .go {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--fh);
  padding: 0 var(--space-xl);
  border: 0;
  background: var(--acting);
  color: #fff;
  cursor: pointer;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  white-space: nowrap;
}

.hub .go:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: .125rem;
}

.hub .go[disabled] {
  opacity: .6;
  cursor: progress;
}

.status .big {
  font: 400 var(--text-xxl)/1.1 var(--display);
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.status .go.sign {
  margin-top: var(--space-xl);
  text-decoration: none;
  justify-content: center;
}

.room .paper .blk.sign {
  scroll-margin-top: calc(var(--bar) + var(--stroke) + var(--space-xl));
}

@media (prefers-reduced-motion:no-preference) {
  html:has(body.hub) {
    scroll-behavior: smooth;
  }
}

.status .facts,
.run .facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.status .facts {
  margin: 0;
}

.run .facts {
  margin: 0;
  padding: var(--space-md) var(--space-xl) var(--space-xxl);
}

.status .facts dt,
.run .facts dt {
  font-family: var(--mono);
  color: var(--ink3);
  white-space: nowrap;
}

.status .facts dd,
.run .facts dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--ui);
}

.cell .n {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.cell.go .n {
  color: #fff;
}

.cell .n span {
  display: none;
}

main:has(.pk:has(input[type=radio]):not(:has(input:checked))) .side .cell.go[data-derived] {
  opacity: .35;
  pointer-events: none;
}

button.cell {
  font-family: var(--ui);
}

.cell {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--fh);
  padding: 0 var(--space-xl);
  border: 0;
  border-bottom: var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--ink2);
  list-style: none;
  transition: background-color .15s ease,color .15s ease;
}

.cell:hover {
  background: var(--tint);
  color: var(--ink);
}

.cell:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: -.25rem;
}

.cell.go {
  background: var(--acting);
  color: #fff;
}

.cell.go:hover {
  background: var(--ink);
  color: #fff;
}

.cell.card {
  justify-content: space-between;
  cursor: default;
}

.cell.card:hover {
  background: transparent;
  color: var(--ink2);
}

.cell.card form {
  display: contents;
}

.cell.card button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--acting);
  cursor: pointer;
}

.cell.card button:hover {
  color: var(--ink);
}

.hub .flash {
  padding: var(--space-md) var(--content-edge);
  background: var(--highlight);
  color: var(--ink);
  font-size: var(--text-sm);
}

.hub .flash--error {
  background: var(--late);
  color: #fff;
}

.hub-foot {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--side);
  min-height: var(--bar);
  border-top: var(--line);
  background: var(--tint);
  font: var(--action-font);
  letter-spacing: var(--action-tracking);
  text-transform: var(--action-casing);
  color: var(--ink2);
}

.hub-foot .cells {
  display: flex;
  min-width: 0;
}

.hub-foot .cells span {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 0 var(--space-lg);
  min-height: var(--bar);
  line-height: var(--bar);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-foot .cells span+span,
.hub-foot .cells .reach {
  border-left: var(--line);
}

.hub-foot .reach {
  display: flex;
  align-items: center;
  flex: none;
}

.hub-foot .ico {
  display: grid;
  place-items: center;
  flex: 0 0 var(--fh);
  width: var(--fh);
  height: var(--fh);
}

.hub-foot .ico svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.hub-foot b {
  font-weight: 500;
  color: var(--ink);
}

.hub-foot b a:hover,
.hub-foot .us a:hover {
  color: var(--ink);
}

.hub-foot .us {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 .5ch;
  min-height: var(--bar);
  border-left: var(--line);
  color: var(--ink3);
}

.hub-foot .us a {
  color: var(--acting);
}

.hub-foot.whole {
  grid-template-columns: minmax(0,1fr);
}

.room .paper .p-logo {
  display: none;
}

.room .paper:is(.invoice.structure,.invoice.classic,.document) .p-from {
  border-left: 0;
  padding-left: 0;
}

.room .paper.document .p-logo {
  display: block;
}

.room .paper.document .p-studio>.p-from {
  border-left: var(--pl);
  padding-left: var(--space-xl);
}

.room .sheet {
  min-width: 0;
}

@media print {
  html,
  body.hub {
    background: #fff;
  }

  .room .paper .p-logo {
    display: block;
  }

  .room .paper:is(.invoice.structure,.invoice.classic,.document) .p-from {
    border-left: var(--pl);
    padding-left: var(--space-lg);
  }
}

@media (max-width:67.5rem) {
  body.hub {
    --side: calc(40 * var(--u));
  }

  .room .paper.document .p-head>.p-studio {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-xl);
  }

  .room .paper.document .p-studio>.p-logo {
    width: calc(25*var(--u));
    height: calc(10*var(--u));
    margin: 0;
  }

  .room .paper.document .p-studio>.p-logo img {
    object-position: left center;
  }

  .room .paper.document .p-studio>.p-from {
    width: auto;
    border-left: 0;
    padding-left: 0;
  }

  .room .paper.document .p-from>b,
  .room .paper.document .p-from>.contact {
    min-width: calc(6*var(--sc) + 5*var(--space-lg));
  }
}

@media (max-width:53.4375rem) {
  .hub-bar {
    grid-template-columns: auto minmax(max-content,1fr) minmax(min-content,auto);
  }

  .crumb>:not(.back) {
    display: none;
  }

  .crumb .back {
    display: block;
  }

  .hub-foot {
    grid-template-columns: 1fr;
  }

  .hub-foot .cells {
    display: block;
  }

  .hub-foot .cells span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: inherit;
    white-space: normal;
  }

  .hub-foot .cells span+span {
    border-left: 0;
    border-top: var(--line);
    white-space: normal;
  }

  .hub-foot .cells .reach {
    justify-content: center;
    border-left: 0;
    border-top: var(--line);
  }

  .hub-foot .us {
    border-left: 0;
    border-top: var(--line);
  }

  .hub-foot .cells span,
  .hub-foot .us {
    min-height: var(--fh);
  }

  .room {
    grid-template-columns: minmax(0,1fr);
  }

  .side {
    order: -1;
    border-left: 0;
    padding-bottom: 0;
  }

  .side>.run:last-child {
    padding-bottom: 0;
  }

  .room .paper {
    min-height: 0;
  }
}

@media (max-width:40rem) {
  body.hub,
  body.hub.profile {
    grid-template-rows: auto auto 1fr auto;
  }

  .hub-bar,
  body.profile .hub-bar {
    grid-template-columns: max-content minmax(min-content,1fr);
    grid-template-rows: var(--bar) calc(var(--bar) + var(--stroke));
    height: auto;
    top: calc(-1 * (var(--bar) + var(--stroke)));
  }

  .hub-bar .session {
    justify-content: flex-end;
  }

  .hub-bar .studio {
    grid-column: 1 / -1;
    justify-content: center;
    contain: inline-size;
  }

  .crumb,
  .hub-bar .who,
  .hub-bar .session {
    border-top: var(--line);
  }

  .crumb {
    border-left: 0;
    padding: 0 var(--space-xl);
  }

  .crumb:not(:has(>.back)) {
    display: none;
  }

  .crumb:not(:has(>.back))+.who,
  .crumb:not(:has(>.back))+.session {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .hub-bar .studio img.icon {
    border-right: 0;
    width: 2.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .hub-bar .studio:has(img.icon) {
    padding-left: var(--space-xl);
  }

  .hub-bar .studio img.icon+span {
    padding-left: var(--space-lg);
  }
}

.styleguide-sample .side,
.styleguide-sample .status,
.styleguide-sample .how,
.styleguide-sample .pick,
.styleguide-sample .cell:not(.go),
.styleguide-sample .kv {
  background: var(--panel);
}

.styleguide-sample .how.open {
  padding-bottom: var(--space-lg-xl);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  border-bottom: var(--line);
  background: var(--tint);
}

.hero .who {
  padding: calc(10*var(--space-sm)) var(--content-edge) var(--space-xxxxl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hero h1 {
  font: 400 clamp(2.75rem,6vw,4.5rem)/1 var(--display);
  margin: 0 0 var(--space-lg);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.hero .line {
  font: 500 var(--text-lg)/1.4 var(--ui);
  color: var(--ink2);
  margin: 0;
}

.hero .cover {
  border-left: var(--line);
  min-height: 26.25rem;
  background: var(--panel);
  position: relative;
  overflow: hidden;
}

.hero .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero .cover.zero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acting);
  -webkit-mask: url(/images/cover-pattern.svg) center/cover no-repeat;
  mask: url(/images/cover-pattern.svg) center/cover no-repeat;
}

.profile-card {
  border-bottom: var(--line);
  background: var(--tint);
}

.profile-card .cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.profile-card .fact {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  height: var(--fh);
  padding: 0 var(--space-xl);
  border-top: var(--line);
  min-width: 0;
}

.profile-card .fact:nth-child(-n+2) {
  border-top: 0;
}

.profile-card .fact:nth-child(2n) {
  border-left: var(--line);
}

.profile-card .fact:last-child:nth-child(odd) {
  grid-column: 1/-1;
}

.profile-card .fact:hover {
  background: var(--panel);
}

.profile-card .l {
  font: var(--eyebrow-font);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink3);
}

.profile-card .v {
  font-size: var(--text-md);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card .v.mono {
  font-family: var(--mono);
  font-size: var(--text-sm);
}

@media (max-width:47.5rem) {
  .profile-card .cols {
    grid-template-columns: minmax(0,1fr);
  }

  .profile-card .fact:nth-child(-n+2) {
    border-top: var(--line);
  }

  .profile-card .fact:first-child {
    border-top: 0;
  }

  .profile-card .fact:nth-child(2n) {
    border-left: 0;
  }
}

.about {
  padding: var(--space-xxxxl) var(--content-edge);
  max-width: calc(var(--content) * .72 + 2*var(--content-edge));
  font: 400 var(--text-md)/1.6 var(--ui);
  color: var(--ink);
}

.about p {
  margin: 0 0 1em;
}

.about p:last-child {
  margin-bottom: 0;
}

@supports (initial-letter:2) or (-webkit-initial-letter:2) {
  .about p:first-child::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
    font-family: var(--display);
    color: var(--field);
    margin-right: var(--space-md-lg);
  }
}

.work {
  border-top: var(--line);
}

.work .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(20rem,1fr));
}

.work .grid figure {
  margin: 0;
  background: var(--panel);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: var(--hairline) solid var(--field);
}

.work .grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work .grid figure.wide {
  grid-column: 1/-1;
  aspect-ratio: 21/9;
}

.hero+.work,
.profile-card+.work {
  border-top: 0;
}

.hub-foot .cells a {
  color: var(--acting);
}

.hub-foot .cells a:hover {
  color: var(--ink);
}

@media (max-width:56.25rem) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero .cover {
    border-left: 0;
    border-top: var(--line);
    min-height: 16.25rem;
    order: -1;
  }
}

.door code {
  font: var(--figure-font);
  line-height: 1;
  padding: var(--space-xs) var(--space-xs-sm);
  border: var(--line);
  color: var(--ink);
}

.door .whoami,
.door .to {
  margin: 0 0 var(--space-lg-xl);
  color: var(--ink);
}

.door .whoami b {
  font-weight: 500;
}

.door .alt {
  margin: var(--space-lg-xl) 0 0;
}

.door .alt a {
  color: var(--acting);
}

.door .alt a:hover {
  color: var(--ink);
}

.door p b {
  font-weight: 500;
  color: var(--ink);
}

.door .rooms {
  border-top: var(--line);
}

.wide {
  padding: var(--space-xxxxl) var(--content-edge);
  background: var(--tint);
  min-width: 0;
}

.wide h1 {
  margin: 0 0 var(--space-sm-md);
  font: var(--title-font);
  color: var(--ink);
}

.wide h1:has(+.hub-table) {
  margin-bottom: var(--space-xxl);
}

.wide .sub {
  margin-bottom: var(--space-xxl);
  color: var(--ink2);
}

.wide .sub p {
  margin: 0 0 var(--space-md);
}

.wide .sub p:last-child {
  margin-bottom: 0;
}

.hub-table {
  margin-bottom: var(--space-xxl);
  border: var(--line);
}

.hub-table .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--fh);
  padding: 0 var(--space-xl);
  background: var(--panel);
  font: var(--eyebrow-font);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink3);
}

.hub-table .head a {
  color: var(--acting);
}

.hub-table .head a::after {
  content: "\a0▸";
}

.hub-table .head a:hover {
  color: var(--ink);
}

.hrow {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,3fr) minmax(0,2fr) minmax(0,3fr);
  column-gap: var(--space-xxl);
  align-items: center;
  min-height: var(--fh);
  padding: 0 var(--space-xl);
  border-top: var(--line);
  color: var(--ink);
}

a.hrow:hover {
  background: var(--panel);
}

.hrow .n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrow .tag {
  justify-self: start;
  display: block;
  height: 1.5rem;
  padding: 0 var(--space-sm);
  border: var(--line);
  font: var(--eyebrow-font);
  line-height: 1.375rem;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrow .amt {
  justify-self: end;
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--ink);
}

.hrow .st {
  font-size: var(--text-sm);
  color: var(--ink3);
  white-space: nowrap;
}

.hrow.due .st {
  color: var(--ink);
  justify-self: start;
  background: var(--highlight);
  padding: var(--space-xs) var(--space-xs-sm);
  margin-left: calc(-1 * var(--space-xs-sm));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hrow.late .st {
  color: var(--late);
}

.needs .hrow:has(.verb) {
  grid-template-columns: minmax(0,4fr) minmax(0,3fr) minmax(0,2fr) minmax(0,3fr) calc(5*var(--u));
}

.hrow .verb {
  justify-self: end;
  font: var(--eyebrow-font);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-casing);
  color: var(--ink2);
  white-space: nowrap;
}

.hrow .verb::after {
  content: "\a0\2192";
  letter-spacing: 0;
  color: var(--ink);
}

a.hrow:hover .verb {
  color: var(--ink);
}

.hub-table .empty {
  padding: var(--space-lg) var(--space-xl);
  border-top: var(--line);
  color: var(--ink3);
}

.hub-table .pick {
  border-top: 0;
}

.hub-table .how {
  padding-bottom: var(--space-lg-xl);
}

.hub-table .how.open {
  display: block;
}

.room-cell {
  display: block;
  padding: var(--space-sm-md) var(--space-xl);
  border-bottom: var(--line);
  color: var(--ink);
}

a.room-cell:hover {
  background: var(--tint);
}

.room-cell b {
  font-weight: 500;
}

.room-cell span {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink3);
  margin-top: var(--space-xxs);
}

.side>.head:first-child {
  padding-top: var(--space-xxxxl);
}

.side .status+.head {
  border-top: 0;
}

.side .room-cell:has(+.head) {
  margin-bottom: var(--space-xxxxl);
}

@media (max-width:53.4375rem) {
  .room {
    grid-template-rows: auto 1fr;
  }

  .hrow {
    grid-template-columns: 1fr;
    row-gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl);
  }

  .hrow .amt {
    justify-self: start;
  }

  .needs .hrow:has(.verb) {
    grid-template-columns: 1fr;
  }

  .hrow .verb {
    justify-self: end;
  }
}

.door .welcome {
  padding: var(--space-xl);
  border: var(--line);
  background: var(--tint);
  margin-bottom: var(--space-xxl);
}

.door .welcome p {
  color: var(--ink);
  margin: 0 0 var(--space-md);
}

.door .welcome p:last-child {
  margin-bottom: 0;
}