/* soxton.css — the Soxton "s" logo tile on the Experience entry.
   soxton-mark.js draws the live letter on a canvas and adds .sx-live; until
   then (no JS, or the module failed) the tile shows the same dot layout as a
   static SVG. Brand blue #468CFF on white, never recoloured. */

.tline .tl-item--mark {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
}
.tl-item--mark > .tl-meta,
.tl-item--mark > .tl-head { grid-column: 1; }
.tl-item--mark > .sx-mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.sx-mark {
  --sx-size: 112px;
  --sx-mark: color-mix(in srgb, var(--fg) 60%, transparent);
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 9px;
  margin: 2px 2px 0 0;
  pointer-events: none;
  user-select: none;
}

/* HUD crop marks just outside the tile. */
.sx-mark::before {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: calc(var(--sx-size) + 12px);
  height: calc(var(--sx-size) + 12px);
  background:
    linear-gradient(var(--sx-mark), var(--sx-mark)) left top / 8px 1px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) left top / 1px 8px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) right top / 8px 1px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) right top / 1px 8px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) left bottom / 8px 1px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) left bottom / 1px 8px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) right bottom / 8px 1px,
    linear-gradient(var(--sx-mark), var(--sx-mark)) right bottom / 1px 8px;
  background-repeat: no-repeat;
}

.sx-tile {
  position: relative;
  width: var(--sx-size);
  height: var(--sx-size);
  flex: none;
  overflow: hidden;
  border-radius: 22%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M66.9 33.4h0M68.7 31.3h0M70.5 29.2h0M72.3 27.1h0M74.1 25.1h0M66.2 29h0M68.2 27.3h0M64 30.6h0M72.6 23.3h0M69.3 24.3h0M66.6 25.6h0M70.3 21.8h0M64.7 26.8h0M62.4 28.4h0M66.9 23.1h0M67.9 20.5h0M63 24.8h0M64.5 22.1h0M65.3 19.5h0M60.7 26.3h0M61.1 22.9h0M62.7 18.7h0M60.8 20.5h0M58.6 24.4h0M60.1 18.1h0M58 20.6h0M56.4 22.9h0M57.4 17.7h0M55.5 19.8h0M54.6 17.5h0M53.9 21.7h0M51.9 17.4h0M51.3 21h0M49.2 17.5h0M48.6 20.7h0M46.4 17.7h0M45.9 21h0M43.7 18.1h0M43.2 21.8h0M41.1 18.8h0M41 23.3h0M38.5 19.8h0M38.5 22.4h0M36.1 21h0M39.2 25.4h0M37 24.4h0M33.8 22.5h0M34.7 25.3h0M31.7 24.3h0M38.1 27.9h0M32.8 27.3h0M30 26.4h0M35.5 28.6h0M37.9 30.6h0M28.7 28.8h0M31.4 29.7h0M35.2 31.3h0M38.5 33.3h0M33 32.4h0M27.8 31.4h0M30.5 32.3h0M35.8 34h0M27.3 34.1h0M33.3 35h0M30 35h0M39.9 35.6h0M27.2 36.8h0M37.1 36.5h0M30.1 37.8h0M32.5 37.4h0M27.5 39.6h0M30.6 40.5h0M28.2 42.2h0M33.2 39.7h0M35.3 38.7h0M29.3 44.7h0M31.6 43.1h0M34.3 42.2h0M38.9 38.5h0M30.9 46.9h0M37.2 40.7h0M33.2 45.3h0M36 44.3h0M32.9 48.8h0M41.9 37.5h0M35.2 47.1h0M39.4 42.4h0M41.1 40.2h0M35.1 50.4h0M38.3 45.9h0M37.6 48.6h0M37.5 51.7h0M41.8 43.8h0M44.3 38.9h0M40.7 47.1h0M43.5 41.6h0M40 49.8h0M40 52.8h0M44.3 44.9h0M43.3 48.2h0M46.8 40h0M42.6 50.9h0M46.1 42.7h0M42.6 53.8h0M46.9 45.9h0M45.9 49.1h0M45.2 51.8h0M49.3 41h0M48.7 43.6h0M45.2 54.6h0M49.5 46.8h0M48.5 49.9h0M47.9 52.6h0M51.9 41.8h0M51.3 44.5h0M47.8 55.4h0M52.1 47.6h0M51.2 50.7h0M50.5 53.4h0M54.5 42.6h0M53.9 45.3h0M50.4 56.2h0M54.7 48.5h0M53.8 51.5h0M53.2 54.2h0M57.1 43.5h0M56.5 46.2h0M53 57h0M57.4 49.4h0M56.4 52.4h0M59.7 44.4h0M55.8 55.1h0M59.2 47.1h0M55.6 58h0M59.9 50.4h0M62.3 45.4h0M59 53.4h0M61.7 48.2h0M58.3 56.1h0M58.1 59.1h0M64.7 46.6h0M62.4 51.6h0M64.2 49.4h0M61.5 54.6h0M60.8 57.4h0M67.1 47.9h0M64.8 53h0M66.5 50.8h0M60.5 60.5h0M63.8 56.1h0M69.4 49.5h0M63.1 59h0M68.7 52.6h0M66.9 54.7h0M71.3 51.4h0M65.9 57.9h0M70.4 54.7h0M73 53.6h0M68.6 56.9h0M62.5 62.3h0M71.7 57.1h0M74.2 56h0M65 60.9h0M67.7 59.9h0M70.1 59.1h0M75.1 58.6h0M72.5 59.8h0M69.5 62.1h0M75.5 61.3h0M72.8 62.5h0M66.5 63.2h0M75.6 64h0M69.5 64.8h0M72.7 65.3h0M64.1 64.5h0M75.3 66.8h0M67.4 65.8h0M72.1 68h0M74.5 69.4h0M64.8 67.1h0M68.6 69.1h0M71 70.5h0M73.4 71.9h0M64.9 69.9h0M67 71.6h0M69.4 72.8h0M71.8 74.1h0M64.2 72.5h0M70 76.1h0M66.6 74.2h0M67.9 77.9h0M65 76.4h0M62.8 74.9h0M65.5 79.3h0M62.8 78.1h0M63.1 80.5h0M60.8 76.7h0M60.5 81.4h0M58.5 78.1h0M57.8 82h0M55.9 79h0M55.1 82.4h0M53.2 79.3h0M52.4 82.6h0M50.4 79h0M49.6 82.6h0M47.8 78.3h0M46.9 82.4h0M44.2 82h0M45.4 77.1h0M44.3 79.6h0M41.5 81.4h0M41.7 78.5h0M43.2 75.4h0M38.9 80.7h0M41.2 73.6h0M36.3 79.8h0M37.8 77.4h0M39 75.3h0M33.8 78.7h0M39.4 71.5h0M35.2 76.3h0M37.2 73.2h0M31.4 77.5h0M32.7 75.1h0M37.7 69.3h0M33.7 72.8h0M35.5 70.9h0M29 76.1h0M30.3 73.6h0M36.2 67h0M33.9 68.6h0M26.8 74.5h0M31.9 69.9h0M29.8 71.2h0M25 72.6h0M27 70.8h0M29 68.9h0M31 67h0M33 65.2h0' stroke='%23468CFF' stroke-width='2.20' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(20, 28, 60, .12);
  forced-color-adjust: none; /* stays a brand tile in high-contrast modes */
  pointer-events: auto; /* hovering the tile itself may re-sign it */
}
.sx-tile.sx-live { background-image: none; }

.sx-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Desktop: a vertical readout up the tile's left edge. */
.sx-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 9.5px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--soft, currentColor);
}

/* Below 1280px a tile beside the head leaves too little width for the title
   and its chip, so the tile moves under "Soxton AI · Full-time" and the title
   keeps the full width. 96px on tablets and small laptops, 84px on phones. */
@media (max-width: 1279px) {
  .sx-mark {
    --sx-size: 96px;
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
    margin: 10px 0 2px 6px;
  }
  .sx-mark::before { right: auto; left: -6px; }
  .sx-label { writing-mode: horizontal-tb; transform: none; }
  .tline .tl-item--mark {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .tl-item--mark > .sx-mark {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 767px) {
  .sx-mark { --sx-size: 84px; }
}

@media print {
  .sx-mark::before { display: none; }
}