/* Front-page "The systems" DepthRibbon section. Without WebGL / JS the link
   list is a visible grid of workflow covers; once the ribbon mounts
   (section[data-depth-ribbon="on"]) the list becomes a keyboard index whose
   links appear only while focused. */
.systems{
  position:relative;isolation:isolate;
  background:var(--bg,#0a0a0b);color:var(--text,#e9e7df);
  border-bottom:1px solid var(--line,rgba(212,175,55,.16));
}
.systems__head{padding:40px 32px 8px;max-width:1400px;margin:0 auto}
.systems__title{
  margin:0 0 .35rem;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;color:#f6f1e1;
}
.systems__lede{margin:0;font-family:var(--body);font-size:.95rem;color:#cfc7ad}
.systems__ribbon{display:none}

/* No-JS / no-WebGL fallback: a plain grid of real links. */
.systems__list{
  list-style:none;margin:0 auto;padding:20px 32px 40px;max-width:1400px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}
.systems__link{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.systems__link img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line,rgba(212,175,55,.16))}
.systems__name{font-weight:600;color:var(--gold-2,#E8CE7A)}
.systems__meta{font-size:.8rem;color:var(--muted,#8f8b7c)}
.systems__link:hover .systems__name{text-decoration:underline;text-underline-offset:3px}
.systems__link:focus-visible{outline:2px solid var(--gold-2,#E8CE7A);outline-offset:4px;border-radius:10px}

/* Mounted: overlay heading on the ribbon, ribbon fills the section. */
/* The workflow covers are dark, so the mounted section gets a warm gold glow
   behind the ribbon to separate the cards (and their shadows) from the page. */
.systems[data-depth-ribbon="on"]{
  height:620px;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 55% 58%, rgba(164,147,88,.20) 0%, rgba(164,147,88,.07) 45%, rgba(10,10,11,0) 75%),
    var(--bg,#0a0a0b);
}
.systems[data-depth-ribbon="on"] .systems__head{
  position:absolute;z-index:2;left:0;right:0;top:0;max-width:none;
  padding:32px 32px 56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.6) 60%,rgba(10,10,11,0) 100%);
}
.systems[data-depth-ribbon="on"] .systems__ribbon{display:block;position:absolute;inset:0;z-index:1}
.systems__ribbon:focus-visible{outline:2px solid var(--gold-2,#E8CE7A);outline-offset:-4px}
.systems[data-depth-ribbon="on"] .systems__list{display:block;padding:0;margin:0;max-width:none}
.systems[data-depth-ribbon="on"] .systems__link{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.systems[data-depth-ribbon="on"] .systems__link:focus{
  z-index:3;left:16px;bottom:16px;width:auto;height:auto;margin:0;clip:auto;overflow:visible;
  padding:10px 14px;border-radius:10px;background:rgba(10,10,11,.92);
  border:1px solid var(--gold-2,#E8CE7A);outline:none;white-space:normal;max-width:min(420px,calc(100% - 32px));
}
.systems[data-depth-ribbon="on"] .systems__link:focus img{display:none}

/* Caption (rendered by depth-ribbon.js) and its Open link. */
.systems .depth-ribbon__caption{font-family:Inter,ui-sans-serif,system-ui,sans-serif;text-shadow:0 1px 12px rgba(0,0,0,.85);padding:0 16px}
.systems .depth-ribbon__title{color:#f6f1e1}
.systems .depth-ribbon__open{
  margin-top:8px;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;
  background:var(--gold,#D4AF37);color:#0a0a0b;font-family:var(--mono);font-weight:600;font-size:.8rem;
  text-decoration:none;text-shadow:none;
}
.systems .depth-ribbon__open:hover{background:var(--gold-2,#E8CE7A);text-decoration:none}
.systems .depth-ribbon__open:focus-visible{outline:2px solid #f6f1e1;outline-offset:3px}

@media (max-width:699px){
  .systems__head{padding:28px 16px 8px}
  .systems__list{padding:16px 16px 32px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .systems[data-depth-ribbon="on"]{height:480px}
  .systems[data-depth-ribbon="on"] .systems__head{padding:24px 16px 44px}
}