/* Fernando Kylas Brand System. components.css
   Rules only: the reasoning is in the repository, at publications/brand-system/css/components.css.
   Nothing else is altered. No value, selector or declaration differs
   from source. See publications/brand-system/build/assemble.py. */
.si-sect + .si-sect { margin-block-start: var(--fk-pause-section); }

.si-sect__label  { margin-block-end: var(--fk-space-4); }
.si-sect__title  { margin-block-end: var(--fk-pause-bound); }
.si-sect__lead   { margin-block-end: var(--fk-pause-related); }
.si-sect__body   { margin-block-start: var(--fk-pause-related); }

.si-sect--marked > .si-sect__label {
  padding-block-start: var(--fk-space-4);
  border-block-start: var(--fk-rule-accent);

  display: inline-block;
}

.si-hero {
  padding-block: 0 var(--fk-space-10);
}
@media (min-width: 64rem) {
  .si-hero { padding-block: var(--fk-space-7) var(--fk-space-11); }
}

.si-hero__title {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-weight-display);
  font-size: var(--fk-section-title-size);
  line-height: var(--fk-section-title-lh);
  letter-spacing: var(--fk-section-title-track);

  --fk-measure-context: none;
  max-width: 22ch;
  margin-block-end: var(--fk-pause-related);

  text-wrap: balance;
}

.si-hero__lead {
  font-size: var(--fk-lead-size);
  line-height: var(--fk-lead-lh);
  letter-spacing: var(--fk-lead-track);
  font-weight: var(--fk-lead-weight);
  --fk-measure-context: var(--fk-measure-lead);
  max-width: min(var(--fk-measure-context), 100%);
  color: var(--fk-text-secondary);
}

.si-hero__actions {
  margin-block-start: var(--fk-pause-related);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-4);
  align-items: center;
}

@media (min-width: 40rem) {
  .si-hero__title {
    font-size: var(--fk-report-title-size);
    line-height: var(--fk-report-title-lh);
    letter-spacing: var(--fk-report-title-track);
  }
}

@media (min-width: 64rem) {
  .si-hero__title {
    font-size: var(--fk-display-size);
    line-height: var(--fk-display-lh);
    letter-spacing: var(--fk-display-track);

    margin-inline-start: -0.022em;
  }
}

.si-head { padding-block: var(--fk-space-9) 0; }
.si-head + * { margin-block-start: var(--fk-pause-section); }

.si-head__title {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-weight-display);
  font-size: var(--fk-section-title-size);
  line-height: var(--fk-section-title-lh);
  letter-spacing: var(--fk-section-title-track);
  --fk-measure-context: none;
  max-width: 26ch;
  margin-block-end: var(--fk-pause-bound);
}

.si-head__lead {
  font-size: var(--fk-lead-size);
  line-height: var(--fk-lead-lh);
  letter-spacing: var(--fk-lead-track);
  font-weight: var(--fk-lead-weight);
  --fk-measure-context: var(--fk-measure-lead);
  max-width: min(var(--fk-measure-context), 100%);
  color: var(--fk-text-secondary);
}

@media (min-width: 64rem) {
  .si-head__title {
    font-size: var(--fk-report-title-size);
    line-height: var(--fk-report-title-lh);
    letter-spacing: var(--fk-report-title-track);
  }
}

.si-cards {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-5);
  --fk-measure-context: none;
}
@media (min-width: 40rem) { .si-cards--2, .si-cards--lead { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .si-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .si-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.si-cards--lead { margin-block-end: var(--fk-space-5); }

.si-card {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-3);
  padding: var(--fk-space-5);
  background: var(--fk-surface-raised);

  --fk-text-tertiary: var(--fk-text-tertiary-raised);
  border: var(--fk-hairline);
  border-radius: var(--fk-radius-lg);

  --fk-measure-context: none;
}

.si-card__title {
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
  margin: 0;
}

.si-card__title > a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  overflow-wrap: break-word;
}

.si-card__body {
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  color: var(--fk-text-secondary);
  margin: 0;
}
.si-card__status { margin: 0; }

.si-cards--lead .si-card { padding: var(--fk-space-6); }
.si-cards--lead .si-card__title {
  font-size: var(--fk-subsection-size);
  line-height: var(--fk-subsection-lh);
  letter-spacing: var(--fk-subsection-track);
}
.si-cards--lead .si-card__body {
  font-size: var(--fk-body-size);
  line-height: var(--fk-body-lh);
  letter-spacing: var(--fk-body-track);
}

.si-card--show { border-block-start: var(--fk-rule-accent); }

.si-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);
  font-size: var(--fk-label-size);
  line-height: var(--fk-label-lh);
  letter-spacing: var(--fk-label-track);
  font-weight: var(--fk-label-weight);
  text-transform: uppercase;
  color: var(--fk-text-secondary);
}

.si-status__mark {
  inline-size: 0.625em;
  block-size: 0.625em;
  border: 1px solid currentColor;
  border-radius: var(--fk-radius-pill);
  flex: 0 0 auto;
}
.si-status--full .si-status__mark { background: currentColor; }
.si-status--half .si-status__mark {
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
}

.si-panel {
  padding: var(--fk-space-7) var(--fk-space-6);
  background: var(--fk-surface-accent);
  border-radius: var(--fk-radius-lg);
  --fk-measure-context: none;
}
@media (min-width: 64rem) { .si-panel { padding: var(--fk-space-9) var(--fk-space-8); } }

.si-panel__title {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-weight-display-medium);
  font-size: var(--fk-subsection-size);
  line-height: var(--fk-subsection-lh);
  letter-spacing: var(--fk-subsection-track);
  margin-block-end: var(--fk-pause-bound);
}

.si-panel--quiet {
  background: var(--fk-surface-raised);

  --fk-text-tertiary: var(--fk-text-tertiary-raised);
  border: var(--fk-hairline);
}

.si-spec { --fk-measure-context: none; }
.si-spec__label { margin-block-end: var(--fk-space-3); }
.si-spec__label + * { margin-block-start: 0; }

.si-spec__display {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-weight-display);
  font-size: var(--fk-section-title-size);
  line-height: var(--fk-section-title-lh);
  letter-spacing: var(--fk-section-title-track);
  margin-block-end: var(--fk-pause-related);
  max-width: 24ch;
}
@media (min-width: 64rem) {
  .si-spec__display {
    font-size: var(--fk-report-title-size);
    line-height: var(--fk-report-title-lh);
    letter-spacing: var(--fk-report-title-track);
  }
}

.si-spec__text {
  font-size: var(--fk-body-l-size);
  line-height: var(--fk-body-l-lh);
  letter-spacing: var(--fk-body-l-track);
  --fk-measure-context: var(--fk-measure);
  max-width: min(var(--fk-measure-context), 100%);
}

.si-swatches {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-4);
  padding-left: 0;
  list-style: none;
  --fk-measure-context: none;
}
@media (min-width: 34rem) { .si-swatches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .si-swatches { grid-template-columns: repeat(5, 1fr); } }
.si-swatches > li + li { margin-top: 0; }

.si-swatch { display: flex; flex-direction: column; gap: var(--fk-space-2); }

.si-swatch__chip {
  display: block;
  block-size: var(--fk-space-11);
  background: var(--si-chip);
  border: var(--fk-hairline);
  border-radius: var(--fk-radius-md);
  margin-block-end: var(--fk-space-2);
}

.si-swatch__name { font-weight: var(--fk-weight-medium); font-size: var(--fk-body-s-size); }
.si-swatch__role {
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  color: var(--fk-text-secondary);
}
.si-swatch__hex {
  font-size: var(--fk-footnote-size);
  letter-spacing: var(--fk-footnote-track);
  color: var(--fk-text-secondary);
  background: none;
  border: 0;
  padding: 0;
}

.si-chaps {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-6);
  --fk-measure-context: none;
}
@media (min-width: 44rem) { .si-chaps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .si-chaps { grid-template-columns: repeat(3, 1fr); } }

.si-chap {
  border-block-start: var(--fk-hairline);
  padding-block-start: var(--fk-space-4);
  --fk-measure-context: none;
}
.si-chap--first { border-block-start: var(--fk-rule-accent); }
.si-chap__flag { margin-block-end: var(--fk-space-3); }

.si-chap__title {
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
  margin: 0 0 var(--fk-pause-bound);
}

.si-chap__body {
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  color: var(--fk-text-secondary);
  margin: 0;
}

.si-chap__meta {
  margin-block-start: var(--fk-space-3);
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  color: var(--fk-text-secondary);
}

.si-signposts {
  padding-left: 0;
  list-style: none;
  --fk-measure-context: var(--fk-measure-wide);
  max-width: min(var(--fk-measure-context), 100%);
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
}
.si-signposts > li { color: var(--fk-text-secondary); }
.si-signposts > li + li { margin-top: var(--fk-flow-tight); }

.si-brief__status { margin-block-end: var(--fk-pause-related); }

.si-brief {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-2) var(--fk-space-6);
  margin: 0;
  --fk-measure-context: none;
}
@media (min-width: 48rem) { .si-brief { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }

.si-brief > dt {
  font-size: var(--fk-label-size);
  line-height: var(--fk-label-lh);
  letter-spacing: var(--fk-label-track);
  font-weight: var(--fk-label-weight);
  text-transform: uppercase;
  color: var(--fk-text-secondary);
  padding-block-start: var(--fk-space-2);
  border-block-start: var(--fk-hairline);
}
.si-brief > dd {
  margin: 0;
  padding-block-start: var(--fk-space-2);
  --fk-measure-context: var(--fk-measure-wide);
  max-width: min(var(--fk-measure-context), 100%);
}
@media (min-width: 48rem) { .si-brief > dd { border-block-start: var(--fk-hairline); } }
.si-brief > dd:not(:last-child) { margin-block-end: var(--fk-space-5); }

.si-brief__related { margin-block-start: var(--fk-pause-related); }

.si-log {
  padding-left: 0;
  list-style: none;
  --fk-measure-context: none;
}
.si-log > li + li { margin-top: 0; }

.si-log__entry {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-2);
  padding-block: var(--fk-space-6);
  border-block-start: var(--fk-hairline);
}
@media (min-width: 52rem) {
  .si-log__entry {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: var(--fk-space-6);
  }
  .si-log__date  { grid-row: 1; grid-column: 1; }
  .si-log__title { grid-row: 1; grid-column: 2; }
  .si-log__body  { grid-row: 2; grid-column: 2; }
  .si-log__meta  { grid-row: 3; grid-column: 2; }
}

.si-log__date {
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  font-weight: var(--fk-weight-medium);
  color: var(--fk-text-secondary);
  margin: 0;
}

.si-log__title {
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
  margin: 0;
  --fk-measure-context: var(--fk-measure-wide);
  max-width: min(var(--fk-measure-context), 100%);
}

.si-log__body {
  margin: 0;
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  color: var(--fk-text-secondary);
  --fk-measure-context: var(--fk-measure);
  max-width: min(var(--fk-measure-context), 100%);
}

.si-log__meta {
  margin: 0;
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  color: var(--fk-text-secondary);
}

.si-tech {
  margin-block-start: var(--fk-pause-section);
  border-block-start: var(--fk-hairline);
  padding-block-start: var(--fk-space-5);
  --fk-measure-context: none;
}

.si-tech > summary {
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  font-weight: var(--fk-weight-medium);
  cursor: pointer;
  padding-block: var(--fk-space-2);
}
.si-tech > summary > span { color: var(--fk-text-secondary); font-weight: var(--fk-weight-book); }

.si-tech__body { margin-block-start: var(--fk-pause-related); }
.si-tech__body > h3 {
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
  margin-block-start: var(--fk-pause-related);
  margin-block-end: var(--fk-pause-bound);
}
.si-tech__body > * + h3 { margin-block-start: var(--fk-pause-related); }

.si-subnav {
  margin-block-end: var(--fk-pause-related);
  --fk-measure-context: none;
}
.si-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-2) var(--fk-space-5);
  padding-left: 0;
  list-style: none;
  --fk-measure-context: none;
}
.si-subnav li + li { margin-top: 0; }
.si-subnav a {
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
}
.si-subnav [aria-current="page"] {
  font-weight: var(--fk-weight-medium);
  text-decoration: none;
  border-block-end: var(--fk-rule-accent);
}

.si-prose {
  --fk-measure-context: var(--fk-measure);
  max-width: min(var(--fk-measure-context), 100%);
}
.si-prose > * + * { margin-block-start: var(--fk-flow); }
.si-prose > :is(h2, h3) + * { margin-block-start: var(--fk-pause-bound); }
.si-prose > h2 {
  margin-block-start: var(--fk-pause-section);
  font-size: var(--fk-subsection-size);
  line-height: var(--fk-subsection-lh);
  letter-spacing: var(--fk-subsection-track);
  font-weight: var(--fk-subsection-weight);
}
.si-prose > h3 {
  margin-block-start: var(--fk-pause-related);
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
}
.si-prose > :first-child { margin-block-start: 0; }

.si-quote {
  font-family: var(--fk-font-display);
  font-size: var(--fk-quote-size);
  line-height: var(--fk-quote-lh);
  letter-spacing: var(--fk-quote-track);
  font-weight: var(--fk-quote-weight);
  --fk-measure-context: var(--fk-measure-wide);
  max-width: min(var(--fk-measure-context), 100%);
  margin-block: var(--fk-pause-section);
  padding-inline-start: var(--fk-space-5);
  border-inline-start: var(--fk-rule-accent);
}
.si-quote > p { margin: 0; }
.si-quote > footer {
  margin-block-start: var(--fk-space-4);
  font-family: var(--fk-font-text);
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  color: var(--fk-text-secondary);
}

.si-stages {

  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--fk-space-5);
  padding-left: 0;
  list-style: none;
  counter-reset: si-stage;
  --fk-measure-context: none;
}
@media (min-width: 46rem) { .si-stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .si-stages { grid-template-columns: repeat(4, 1fr); } }
.si-stages > li + li { margin-top: 0; }

.si-stage {
  counter-increment: si-stage;
  border-block-start: var(--fk-hairline);
  padding-block-start: var(--fk-space-4);
}
.si-stage::before {
  content: counter(si-stage, decimal-leading-zero);
  display: block;
  font-size: var(--fk-label-size);
  letter-spacing: var(--fk-label-track);
  font-weight: var(--fk-label-weight);
  color: var(--fk-text-secondary);
  margin-block-end: var(--fk-space-3);
}
.si-stage__title {
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  font-weight: var(--fk-card-title-weight);
  margin: 0 0 var(--fk-pause-bound);
}
.si-stage__body {
  margin: 0;
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  color: var(--fk-text-secondary);
}

.si-log__title,
.si-log__body,
.si-prose,
.si-chap__body,
.si-card__body,
.si-brief > dd { overflow-wrap: break-word; }

.si-lost { padding-block: 0 var(--fk-space-10); }
@media (min-width: 64rem) { .si-lost { padding-block: var(--fk-space-7) var(--fk-space-11); } }

.si-ground {
  position: relative;
  isolation: isolate;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.si-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fk-surface);
  opacity: 0.82;
}

.si-ground > * { position: relative; }

.si-ground--ribbon   { background-image: url("../../assets/images/ground/ground-ribbon-light.webp"); }
.si-ground--curve    { background-image: url("../../assets/images/ground/ground-curve-light.webp"); }
.si-ground--arc      { background-image: url("../../assets/images/ground/ground-arc-light.webp"); }
.si-ground--facet    { background-image: url("../../assets/images/ground/ground-facet-light.webp"); }
.si-ground--gradient { background-image: url("../../assets/images/ground/ground-gradient-light.webp"); }

[data-theme="dark"] .si-ground--ribbon   { background-image: url("../../assets/images/ground/ground-ribbon-dark.webp"); }
[data-theme="dark"] .si-ground--curve    { background-image: url("../../assets/images/ground/ground-curve-dark.webp"); }
[data-theme="dark"] .si-ground--arc      { background-image: url("../../assets/images/ground/ground-arc-dark.webp"); }
[data-theme="dark"] .si-ground--facet    { background-image: url("../../assets/images/ground/ground-facet-dark.webp"); }
[data-theme="dark"] .si-ground--gradient { background-image: url("../../assets/images/ground/ground-gradient-dark.webp"); }

.si-table-label { margin-block: var(--fk-pause-related) var(--fk-space-3); }
.si-table-label + table { margin-block-start: 0; }

.si-head__plate {
  margin-block: var(--fk-space-6) var(--fk-space-7);
  padding-block: var(--fk-space-9);
  border-radius: var(--fk-radius-sm);
  display: flex;
  align-items: center;
  min-height: 34vh;
}
.si-head__plate > .si-head__title { margin-block-end: 0; }

.si-head__plate::before { opacity: 0.40; }

.si-portrait-block { display: grid; gap: var(--fk-space-7); }
@media (min-width: 48rem) {
  .si-portrait-block {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--fk-space-8);
    align-items: start;
  }
}

.si-portrait { margin: 0; max-width: 18rem; }

.si-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fk-radius-sm);

  aspect-ratio: 928 / 1120;
  object-fit: cover;
}

.si-portrait figcaption {
  margin-block-start: var(--fk-space-3);
  color: var(--fk-text-tertiary);
}