/* Built in unison — the three layers of one system.
   Featured drop up top; this section is the collaborative trust floor.
   Joined with activation ritual below (.sy-system--joined). */
.sy-system{
  position:relative;
  padding:100px 0 90px;
  scroll-margin-top:88px;
}

/* One continuous composition: trust trinity → bridge → ritual → proof */
.sy-system--joined{
  padding-bottom:110px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(17,19,23,0.4) 12%,
      rgba(17,19,23,0.55) 40%,
      rgba(17,19,23,0.55) 78%,
      transparent 100%);
}

.sy-sys-bridge{
  display:flex;
  align-items:center;
  gap:18px;
  margin:56px 0 8px;
  justify-content:center;
}
.sy-sys-bridge-line{
  flex:1;
  height:1px;
  max-width:160px;
  background:linear-gradient(90deg,transparent,var(--sy-border-strong));
}
.sy-sys-bridge-line:last-child{
  background:linear-gradient(90deg,var(--sy-border-strong),transparent);
}
.sy-sys-bridge-copy{
  flex:none;
  margin:0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1.05rem,2vw,1.25rem);
  color:var(--sy-ice);
  text-align:center;
  letter-spacing:0.01em;
}

.sy-sys-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.sy-sys-card{
  position:relative;
  padding:28px 26px 26px;
  background:var(--sy-surface);
  border:1px solid var(--sy-border-subtle);
  overflow:hidden;
}
.sy-sys-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
}
.sy-sys-card--synmint::before{background:linear-gradient(90deg,var(--sy-cyan),transparent 70%)}
.sy-sys-card--m424::before{background:linear-gradient(90deg,var(--sy-amber),transparent 70%)}
.sy-sys-card--sekurex::before{background:linear-gradient(90deg,var(--sy-mint),transparent 70%)}

/* MAISON 424 owns its own frame — the provenance layer, given depth the other two don't get.
   overflow:hidden keeps the plate inside the card; only the soft halo reaches into the
   22px grid gap, so it never cuts over the SYNMINT or SEKUREX cards. */
.sy-sys-card--m424{
  min-height:268px;
  /* pin the plate/scrim/copy layering to this card — without it the card is not a
     stacking context once .sy-reveal settles (z-index:auto, opacity:1, transform:none),
     so the 0/1/2/3 layers hoist to the nearest ancestor and only overflow:hidden
     saves them. It also stops the layering isolating and un-isolating mid-reveal. */
  isolation:isolate;
  border-color:rgba(245,160,60,0.16);
  box-shadow:
    0 18px 54px rgba(5,5,7,0.55),
    0 0 26px rgba(245,160,60,0.09);
}
/* keep the amber hairline above the plate and scrim */
.sy-sys-card--m424::before{z-index:3}

.sy-sys-plate{
  position:absolute;
  inset:-6%;            /* overscan so the drift never exposes an edge */
  z-index:0;
  background:url("/assets/images/maison-424-orbit-v2.webp") 76% 42% / cover no-repeat;
}

/* Base scrim — the ambient treatment, which is what 861-1099px gets (both the panel
   breakpoint and the two narrow ones override it). Three columns at that range leave
   each card only ~260-330px: too tight to split into copy + image panel without the
   copy collapsing, so the orbit stays full-bleed and reads as texture behind it.
   Deliberately NOT the old 100deg ramp — that held >=0.86 opacity across the first 54%
   and only cleared past 76%, which buried an artwork that is centred and full-bleed. */
.sy-sys-card--m424::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--sy-surface) 0%,
      rgba(17,19,23,0.93) 42%,
      rgba(17,19,23,0.86) 72%,
      rgba(17,19,23,0.80) 100%),
    radial-gradient(64% 58% at 62% 62%, rgba(245,160,60,0.14), transparent 74%);
}
.sy-sys-card--m424 > *:not(.sy-sys-plate){
  position:relative;
  z-index:2;
}

/* >=1100px only — below it the card is under ~330px and the split starves the copy
   (measured at a 900px viewport: 9 wrapped lines and a 414px-tall card that dragged
   both sibling cards up with it, since the grid is align-items:stretch).

   The plate becomes a right-hand panel — taller than it is wide. That inversion is the
   whole fix: under `cover` you can only pan along the axis that OVERFLOWS. Full-bleed
   made the plate (aspect ~1.31) wider than the source (760x620, ~1.23), so WIDTH bound,
   horizontal overflow was exactly 0px, and `background-position-x` resolved to a no-op
   — the orbit sat dead-centre under the copy whatever value it was given. A narrow
   panel makes HEIGHT bind, so the pan is live. Percentages keep the proportions
   identical from 1100px up to where the container caps at 1180px. */
@media (min-width:1100px){
  .sy-sys-card--m424{padding-right:36%}
  .sy-sys-plate{
    left:auto;
    right:-5%;
    width:46%;
    background-position:44% 46%;
  }
  /* feather the panel's left edge: solid across the copy, ramping open over the panel,
     with a residual ~0.26 veil to the right edge so the bright ivory/gold still sits
     with the two dark cards beside it. */
  .sy-sys-card--m424::after{
    background:
      linear-gradient(90deg,
        var(--sy-surface) 0%,
        var(--sy-surface) 58%,
        rgba(17,19,23,0.80) 66%,
        rgba(17,19,23,0.42) 76%,
        rgba(17,19,23,0.28) 88%,
        rgba(17,19,23,0.26) 100%),
      radial-gradient(58% 60% at 80% 52%, rgba(245,160,60,0.16), transparent 72%);
  }
}

@media (prefers-reduced-motion: no-preference){
  .sy-sys-plate{animation:sy-orbit 26s ease-in-out infinite alternate}
}
@keyframes sy-orbit{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-1.4%,-1%,0) scale(1.045)}
}

.sy-sys-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  min-height:44px;
}
.sy-sys-head img{height:30px;width:auto}
.sy-sys-orb{width:30px;height:30px;flex:none}
.sy-sys-name{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--sy-text);
  line-height:1.7;
}
.sy-sys-name small{
  display:block;
  font-size:9px;
  letter-spacing:0.28em;
  color:var(--sy-faint);
}

.sy-sys-role{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--sy-ice);
}
.sy-sys-copy{
  margin-top:8px;
  font-size:0.93rem;
  color:var(--sy-dim);
}

.sy-sys-close{
  margin-top:46px;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  text-align:center;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--sy-dim);
}
.sy-sys-close::before,
.sy-sys-close::after{
  content:"";
  height:1px;
  width:min(120px,18vw);
  background:linear-gradient(90deg,transparent,var(--sy-border-strong));
}
.sy-sys-close::after{transform:scaleX(-1)}
.sy-sys-close b{color:var(--sy-ice);font-weight:500}

@media (max-width:860px){
  .sy-sys-grid{grid-template-columns:1fr}
  .sy-sys-close{letter-spacing:0.16em;line-height:1.9;flex-direction:column;gap:10px}
  .sy-sys-close::before,.sy-sys-close::after{display:none}

  /* one column makes the card wide and short — full-bleed would crop the orbit to a
     thin band, so the plate becomes a right-hand panel and keeps its own aspect.
     The panel deliberately sits near the source's own 1.226 aspect, so `cover` shows
     the armillary almost uncropped and background-position has little left to do.

     padding-right reserves the band. Without it the copy ran straight across the
     panel — measured at 860px: the first line's glyphs overran the panel edge by
     238px, over a scrim only ~0.3 opaque there. It is a percentage so the reserve
     tracks the card from 561px up to 860px. */
  .sy-sys-card--m424{min-height:232px;padding-right:44%}
  .sy-sys-plate{
    left:auto;
    right:-2%;
    width:min(46%,320px);
    background-position:60% 44%;
  }
  .sy-sys-card--m424::after{
    background:
      linear-gradient(90deg,
        var(--sy-surface) 0%,
        var(--sy-surface) 52%,
        rgba(17,19,23,0.82) 62%,
        rgba(17,19,23,0.44) 78%,
        rgba(17,19,23,0.26) 100%),
      radial-gradient(52% 78% at 82% 50%, rgba(245,160,60,0.16), transparent 72%);
  }
}

@media (max-width:560px){
  /* narrow again — full-bleed reads better than a sliver of a panel. This query and the
     860px one both match here, so the 44% reserve must be handed back: there is no
     right-hand panel to reserve against once the plate goes full-bleed. */
  .sy-sys-card--m424{min-height:296px;padding-right:26px}
  .sy-sys-plate{
    left:-6%;
    right:-6%;
    width:auto;
    background-position:72% 42%;
  }
  /* Full-bleed means the copy sits ON the artwork, so the veil has to hold until the
     copy ends and only then open. The previous ramp was down to 0.52 by 68% and 0.24 at
     the foot — measured at 375px the last copy line landed at 75% height over a scrim
     only 0.46 opaque, i.e. grey body text on a half-exposed ivory/gold image. It now
     holds ~0.88 through 72% and opens across the clear band below the copy. */
  .sy-sys-card--m424::after{
    background:
      linear-gradient(168deg,
        var(--sy-surface) 8%,
        rgba(17,19,23,0.93) 34%,
        rgba(17,19,23,0.88) 72%,
        rgba(17,19,23,0.42) 88%,
        rgba(17,19,23,0.26) 100%),
      radial-gradient(60% 52% at 62% 78%, rgba(245,160,60,0.16), transparent 72%);
  }
}