/* KiyReload workshop: evolved dark editorial layout. */
body {
  overflow-wrap: break-word;
}
h1,
h2,
h3 {
  font-weight: 620;
}
.wrap {
  width: min(1220px, calc(100% - 80px));
}
.site-header {
  min-height: 100px;
}
.brand-mark {
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 9px 12px 12px;
}
.brand-mark span {
  color: #c5d3a9;
}
.site-header nav a {
  font-family: var(--mono);
  font-size: 0.76rem;
  min-height: 44px;
}
.site-header nav a:hover {
  color: var(--ink);
}
.mobile-menu {
  display: none;
}
.workshop-intro {
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 64px;
  padding: 55px 0 56px;
  align-items: center;
}
.workshop-intro h1 {
  font-size: clamp(2.8rem, 5.1vw, 4.6rem);
  letter-spacing: -0.055em;
  max-width: 20ch;
  margin-bottom: 25px;
  line-height: 1.06;
}
.workshop-intro h1 span {
  color: var(--accent);
}
.workshop-intro .lede {
  font-size: 1.06rem;
  max-width: 55ch;
}
.intro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  font-size: 0.84rem;
}
.solid-link {
  display: inline-flex;
  background: var(--ink);
  color: var(--bg);
  gap: 35px;
  padding: 12px 18px;
  text-decoration: none;
}
.solid-link:hover {
  background: var(--accent);
  color: var(--bg);
}
.workbench-index {
  align-self: stretch;
  padding: 24px 0 12px 32px;
  border-left: 1px solid var(--line);
}
.large-mark {
  display: block;
  font: 600 6rem/0.9 var(--mono);
  letter-spacing: -0.14em;
  color: var(--accent);
  margin: 0 0 28px;
}
.workbench-index .eyebrow {
  font-size: 0.68rem;
  max-width: 26ch;
}
.workbench-index dt {
  font-size: 0.67rem;
  color: var(--muted);
}
.workbench-index dd {
  font-size: 0.82rem;
  margin: 3px 0 18px;
}
.workbench-index > a {
  font-size: 0.75rem;
}
.section {
  padding-block: 40px;
  scroll-margin-top: 2rem;
}
.now-section {
  display: grid;
  grid-template-columns: 0.9fr 1.45fr;
  gap: 80px;
}
.now-section h2 {
  font-size: 2.1rem;
}
.now-section .meta {
  margin-top: 25px;
  font-size: 0.68rem;
}
.now-notes article {
  display: flex;
  gap: 25px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.now-notes article:first-child {
  border: 0;
  padding-top: 0;
}
.now-notes article:last-child {
  padding-bottom: 0;
}
.now-notes .item-number {
  margin: 0;
  padding-top: 3px;
}
.now-notes h3 {
  font-size: 1.1rem;
  margin-bottom: 7px;
}
.now-notes p {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 7px;
  max-width: 62ch;
}
.now-notes a {
  font-size: 0.76rem;
}
.featured-project {
  display: grid;
  grid-template-columns: 0.75fr 1.35fr;
  gap: 35px;
  align-items: center;
  margin: 30px 0 40px;
}
.feature-copy h3 {
  font-size: 2.15rem;
  margin: 9px 0 15px;
}
.feature-copy h3 a,
.secondary-projects h3 a {
  text-decoration: none;
}
.feature-copy p:not(.meta) {
  font-size: 0.93rem;
  color: var(--muted);
}
.feature-copy > a {
  font-size: 0.8rem;
}
.status {
  color: var(--accent);
  background: var(--soft);
  font-size: 0.67rem;
  border-color: #b8c1aa;
}
.technical-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.figure-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 22px;
  font: 0.62rem/1.6 var(--mono);
}
.diagram-label {
  display: block;
  font: 0.62rem/1.6 var(--mono);
  color: var(--muted);
  margin-bottom: 18px;
}
.technical-figure figcaption {
  padding: 13px 22px;
  font: 0.64rem/1.7 var(--mono);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.uma-figure {
  color: #edf0e5;
  background: #26362e;
  border-color: #26362e;
}
.uma-figure .figure-heading,
.uma-figure figcaption {
  border-color: #52614e;
  color: #c9d0bf;
}
.uma-figure .diagram-label {
  color: #b7c4aa;
}
.uma-flow {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
}
.uma-flow > div {
  padding: 26px 20px;
}
.uma-flow strong {
  font-size: 0.96rem;
  font-weight: 500;
}
.uma-flow p {
  font: 0.64rem/1.7 var(--mono);
  color: #c9d0bf;
  margin: 9px 0 0;
}
.uma-flow .core-node {
  background: #344736;
  border-inline: 1px solid #52614e;
}
.core-node strong {
  font-size: 2.3rem;
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.data-line {
  height: 1px;
  background: #52614e;
  margin-block: 25px;
}
.slot-strip {
  display: flex;
  gap: 4px;
  margin-top: 18px;
}
.slot-strip i {
  display: block;
  width: 15px;
  height: 22px;
  border: 1px solid #bbcba6;
}
.slot-strip i:last-child {
  border-style: dashed;
}
.secondary-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.secondary-projects > article {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.secondary-projects h3 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.secondary-projects > article > p:not(.eyebrow) {
  font-size: 0.91rem;
  color: var(--muted);
}
.secondary-projects > article > a {
  display: inline-block;
  font-size: 0.81rem;
  margin-top: 18px;
}
.migration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.migration-grid > div {
  padding: 28px;
}
.migration-grid > div + div {
  background: var(--soft);
  border-left: 1px solid var(--line);
}
.migration-grid h3 {
  font-size: 1.3rem;
}
.migration-grid p {
  font-size: 0.89rem;
}
.migration-grid small {
  display: block;
  font: 0.68rem/1.8 var(--mono);
  color: var(--muted);
}
.secondary-projects .migration-grid > div {
  padding: 20px;
}
.secondary-projects .migration-grid h3 {
  font-size: 1rem;
}
.secondary-projects .migration-grid p {
  font-size: 0.78rem;
}
.hardware-plate {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 25px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hardware-plate .diagram-label {
  grid-column: 1/-1;
  margin-bottom: 12px;
}
.hardware-plate strong {
  font: 550 3.7rem/1.2 var(--mono);
  letter-spacing: -0.08em;
}
.hardware-plate > span:not(.diagram-label) {
  font: 0.7rem/1.8 var(--mono);
  padding-left: 20px;
}
.hardware-plate p {
  font-size: 0.86rem;
  margin: 20px 0;
  grid-column: 1/-1;
}
.hardware-plate small {
  font: 0.64rem/1.7 var(--mono);
  color: var(--muted);
  grid-column: 1/-1;
}
.lab-home {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 50px;
  align-items: center;
}
.lab-home > div > p:not(.eyebrow, .meta) {
  color: var(--muted);
  font-size: 0.95rem;
}
.lab-home > div > a {
  font-size: 0.83rem;
}
.lab-home > div > .meta {
  margin-top: 24px;
  font-size: 0.65rem;
}
.lab-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lab-lanes > div {
  padding: 27px;
}
.lab-lanes > div + div {
  border-left: 1px solid var(--line);
}
.lab-lanes strong {
  display: block;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.diagram-connector {
  display: block;
  font: 0.7rem/1.6 var(--mono);
  color: var(--accent);
  margin: 20px 0;
  border-block: 1px dashed var(--line);
  padding-block: 13px;
}
.lab-lanes p {
  font-size: 0.88rem;
  margin: 0;
}
.lab-lanes b {
  font: 0.7rem/1.8 var(--mono);
  color: var(--muted);
}
.capability-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}
.capability-list article {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 6px 20px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}
.capability-list h3 {
  font-size: 1rem;
  line-height: 1.4;
  grid-row: span 2;
  margin: 0;
}
.capability-list p {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
}
.capability-list a {
  font-size: 0.72rem;
}
.related-link {
  display: inline-block;
  margin-top: 9px;
  font: 0.66rem/1.8 var(--mono);
  color: var(--accent);
}
.closing-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.closing-note p {
  font-size: 0.94rem;
  color: var(--muted);
}
.page-heading {
  padding: 52px 0 38px;
}
.page-heading h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  letter-spacing: -0.05em;
}
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.section-nav a {
  font: 0.72rem/1.7 var(--mono);
  border: 1px solid var(--line);
  padding: 11px 15px;
  text-decoration: none;
  background: var(--surface);
}
.section-nav a:hover {
  background: var(--soft);
}
.work-category {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 50px;
}
.work-entry {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.work-entry:first-child {
  padding-top: 0;
}
.work-entry:last-child {
  border: 0;
  padding-bottom: 0;
}
.work-entry > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}
.work-entry h3 {
  font-size: 1.7rem;
  margin: 8px 0 13px;
}
.work-entry h3 a {
  text-decoration: none;
}
.work-entry p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 65ch;
}
.work-entry .meta {
  font-size: 0.68rem;
  margin-bottom: 0;
}
.archive-summary {
  border-top: 1px solid var(--line);
}
.archive-summary article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.archive-summary article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}
.archive-summary h3 {
  font-size: 1.35rem;
  margin: 10px 0;
}
.archive-summary h3 a {
  text-decoration: none;
}
.archive-summary p {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 60ch;
  margin: 0;
}
.project-meta {
  display: flex;
  align-items: baseline;
  gap: 15px;
  flex-wrap: wrap;
}
.case-study > .technical-figure {
  max-width: 980px;
}
.case-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 60px;
  padding-top: 40px;
}
.case-index {
  padding-top: 30px;
}
.case-index nav {
  display: grid;
}
.case-index nav a {
  font: 0.7rem/1.65 var(--mono);
  padding: 9px 0;
  color: var(--muted);
}
.case-layout .prose > section:first-child h2 {
  margin-top: 25px;
}
.lab-explainer {
  max-width: 78ch;
  color: var(--muted);
  margin: 20px 0 32px;
}
.monitoring-evidence {
  margin: 24px 0;
}
.monitoring-evidence img {
  display: block;
  width: 100%;
}
.monitoring-evidence figcaption {
  padding: 15px 0;
  font: 0.72rem/1.8 var(--mono);
  color: var(--muted);
}
.prose .capability-list {
  grid-template-columns: 1fr;
}
.prose .capability-list h3 {
  margin: 0;
  font-size: 1.1rem;
}
.compatibility {
  padding-top: 28px;
}
.site-footer {
  margin-top: 50px;
}
@media (max-width: 1050px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .site-header {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
  }
  .site-header nav {
    width: auto;
    gap: 17px;
  }
  .workshop-intro {
    grid-template-columns: 1fr 220px;
    gap: 32px;
  }
  .workbench-index {
    padding-left: 23px;
  }
  .now-section {
    gap: 40px;
  }
  .featured-project {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .feature-copy {
    max-width: 75ch;
  }
  .lab-home {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .capability-list article {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .capability-list h3 {
    grid-row: auto;
  }
  .case-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 30px;
  }
}
@media (max-width: 720px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .site-header {
    position: relative;
    flex-wrap: wrap;
    padding: 18px 0;
    gap: 14px;
  }
  .site-header .desktop-nav {
    display: none;
  }
  .brand small {
    font-size: 0.54rem;
  }
  .brand {
    font-size: 1rem;
    gap: 10px;
  }
  .brand-mark {
    font-size: 1.5rem;
    padding: 6px 10px 9px;
  }
  .mobile-menu {
    display: block;
    margin-left: auto;
  }
  .mobile-menu summary {
    font: 0.75rem/1.7 var(--mono);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 10px;
    border: 1px solid var(--line);
  }
  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }
  .mobile-menu[open] {
    width: 100%;
  }
  .mobile-menu[open] summary {
    width: fit-content;
    margin-left: auto;
  }
  .mobile-menu[open] summary span {
    transform: rotate(45deg);
  }
  .site-header .mobile-menu nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }
  .site-header .mobile-menu nav a {
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .workshop-intro {
    grid-template-columns: 1fr;
    padding-block: 35px;
    gap: 30px;
  }
  .workshop-intro h1 {
    font-size: clamp(2.55rem, 7.5vw, 3.9rem);
  }
  .workbench-index {
    display: none;
  }
  .workshop-intro .lede {
    font-size: 1rem;
  }
  .intro-links {
    gap: 16px;
    font-size: 0.77rem;
  }
  .now-section,
  .secondary-projects,
  .closing-note,
  .work-category,
  .case-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .now-section h2 br {
    display: none;
  }
  .now-section h2 {
    font-size: 1.7rem;
  }
  .now-section .meta {
    margin: 0;
  }
  .now-notes article:first-child {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .section {
    padding-block: 30px;
  }
  .uma-flow > div {
    padding: 22px 14px;
  }
  .uma-flow strong {
    font-size: 0.85rem;
  }
  .core-node strong {
    font-size: 1.9rem;
  }
  .figure-heading {
    flex-wrap: wrap;
    gap: 2px 20px;
    padding-inline: 15px;
  }
  .technical-figure figcaption {
    padding-inline: 15px;
  }
  .capability-list {
    grid-template-columns: 1fr;
  }
  .capability-list article {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8px 15px;
  }
  .capability-list h3 {
    grid-row: span 2;
  }
  .case-index {
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .case-index nav {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .case-index nav a {
    min-height: 44px;
  }
  .page-heading {
    padding-top: 35px;
  }
  .page-heading h1 {
    font-size: 2.7rem;
  }
  .lab-lanes > div {
    padding: 22px 18px;
  }
  .lab-lanes strong {
    font-size: 1.08rem;
  }
}
@media (max-width: 440px) {
  .uma-flow {
    grid-template-columns: 1fr;
  }
  .uma-flow > div {
    padding: 20px;
  }
  .uma-flow > div:not(.core-node) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
  }
  .uma-flow .diagram-label {
    grid-column: 1/-1;
    margin-bottom: 10px;
  }
  .uma-flow > div:not(.core-node) strong {
    grid-column: 1;
  }
  .uma-flow > div:not(.core-node) p {
    grid-column: 2;
    margin: 0;
  }
  .uma-flow .data-line {
    grid-column: 1/-1;
    margin: 12px 0;
  }
  .uma-flow .core-node {
    border-inline: 0;
    border-block: 1px solid #52614e;
  }
  .core-node strong br {
    display: none;
  }
  .core-node strong {
    display: block;
    font-size: 1.9rem;
  }
  .core-node strong br:after {
    content: " ";
  }
  .migration-grid,
  .lab-lanes {
    grid-template-columns: 1fr;
  }
  .migration-grid > div + div,
  .lab-lanes > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .lab-lanes .diagram-label {
    margin-bottom: 8px;
  }
  .diagram-connector {
    margin: 10px 0;
    padding-block: 7px;
  }
  .capability-list article {
    grid-template-columns: 1fr;
  }
  .capability-list h3 {
    grid-row: auto;
  }
  .workshop-intro h1 {
    font-size: clamp(2.1rem, 9.1vw, 2.8rem);
  }
  .brand small {
    max-width: 22ch;
  }
  .mobile-menu summary {
    gap: 10px;
  }
  .hardware-plate {
    padding: 20px;
  }
  .project-meta .meta {
    font-size: 0.68rem;
  }
}
@media (max-width: 720px) {
  /* Keep informative diagram labels and metadata readable on small screens. */
  .figure-heading,
  .diagram-label,
  .technical-figure figcaption,
  .monitoring-evidence figcaption,
  .uma-flow p,
  .migration-grid small,
  .hardware-plate > span:not(.diagram-label),
  .lab-lanes b,
  .diagram-connector,
  .now-section .meta,
  .lab-home > div > .meta,
  .work-entry .meta,
  .project-meta .meta,
  .status,
  .related-link,
  .capability-list a,
  .section-nav a,
  .case-index nav a {
    font-size: 0.75rem;
  }
  .brand small {
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .mobile-menu,
  .case-index,
  .workbench-index {
    display: none;
  }
  .wrap {
    width: 100%;
  }
  .technical-figure {
    break-inside: avoid;
  }
}