/* The category pages behind the Products menu: Wireless bridges and Access
   control. Each lead product is shown where it goes, built from Aether's own
   cutouts with the radio link drawn between the units that talk to each other,
   and every part number that job can need sits beside it with its own Order. */

/* The opening is one row, so the first bay sits above the fold. */
.c-open{padding-block:var(--s6) var(--s6)}
.c-open .a-crumb{margin-bottom:var(--s3)}

/* A bay: the job, the product, its order rows on the left, and the
   composition on the right, which takes the wider column because it is
   the thing the reader looks at first. */
.c-bays{display:grid;gap:var(--s7)}
.c-bay{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"text stage" "buy stage" "facts facts";gap:0 var(--s6);align-items:center}
.c-bay__text{grid-area:text;align-self:end}
.c-bay__buy{grid-area:buy;align-self:start}
.c-bay__stage{grid-area:stage;margin:0}
.c-bay .a-facts{grid-area:facts;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hairline-deep)}

.c-bay__job{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);
  line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--on-deep)}
/* Aether's own lockup: the name and its part number at one size, apart by
   weight and color rather than by hierarchy. */
.c-lockup{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;
  margin:var(--s3) 0 0;color:var(--on-deep)}
.c-lockup b{font-weight:700;color:var(--signal-soft);letter-spacing:.01em;white-space:nowrap}
.c-bay__line{font-size:17px;line-height:1.55;color:var(--on-deep-2);margin:var(--s2) 0 var(--s4)}
.c-bay .a-ways{gap:var(--s2)}
.c-bay .a-way{padding:12px var(--s3)}
.c-bay .a-way__name{font-size:17px}
.c-bay .a-way__sub{font-size:15px}
.c-bay__more{margin:var(--s4) 0 0;font-size:16px}
.c-bay__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;
  color:var(--signal-soft);text-underline-offset:4px}
.c-status{display:inline-block;margin:var(--s3) 0 0;padding:4px 12px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--unlit);background:var(--wash)}

/* The composition. Photographs and drawn hardware share one coordinate
   space, so the link always lands on the antenna it belongs to. */
.c-stage{display:block;width:100%;height:auto;overflow:visible}
.c-stage .c-link{fill:none;stroke:var(--signal-soft);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:18 14;filter:drop-shadow(0 0 6px rgba(0,249,249,.5))}
.c-stage .c-wired{fill:none;stroke:var(--wired);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.c-stage .c-node{fill:none;stroke:rgba(166,249,249,.42);stroke-width:2}
.c-stage .c-lbl{font-family:var(--body);font-size:25px;font-weight:600;fill:var(--on-deep)}
.c-stage .c-role{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.08em;fill:var(--signal)}
.c-stage .c-where{font-family:var(--body);font-size:19px;font-weight:600;letter-spacing:.05em;fill:var(--on-deep-3)}
/* The link draws once as the bay arrives, the one motion on these pages. */
.c-stage.a-draw .c-link{clip-path:inset(0 100% 0 0);transition:clip-path 1100ms var(--ease-settle) 200ms}
.c-stage.a-draw.is-in .c-link{clip-path:inset(-20% -4% -20% 0)}
@media (prefers-reduced-motion:reduce){
  .c-stage.a-draw .c-link{clip-path:none;transition:none}
}

/* Parts and the Wiegand Wave: the same order rows on the reading ground,
   smaller and quieter than the lead bays. */
.c-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.c-side__item{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start}
.c-side__shot{display:flex;align-items:flex-end;justify-content:flex-start;height:170px;margin:0 0 var(--s4)}
.c-side__shot img{max-height:100%;width:auto;max-width:100%}
.c-side .a-h2{font-size:clamp(25px,2.6vw,32px)}
.c-side .c-lockup{color:var(--text)}
.c-side .c-lockup b{color:var(--knect)}
.c-side__line{font-size:17px;line-height:1.55;color:var(--text-2);margin:var(--s2) 0 var(--s4)}
.c-rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.c-row{display:block;padding:12px var(--s3);border:1px solid var(--hairline);
  border-radius:14px 14px 14px 0;text-decoration:none;color:inherit;background:var(--read);
  transition:background-color .16s ease,border-color .16s ease}
.c-row:hover,.c-row:focus-visible{background:var(--consult);border-color:var(--knect)}
.c-row__head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.c-row__name{font-family:var(--display);font-weight:700;font-size:17px;color:var(--text)}
.c-row__part{font-family:var(--display);font-weight:600;font-size:15px;color:var(--knect);letter-spacing:.02em}
.c-row__go{margin-left:auto;font-weight:600;font-size:15px;color:var(--knect);white-space:nowrap}
.c-row:hover .c-row__go,.c-row:focus-visible .c-row__go{text-decoration:underline;text-underline-offset:3px}
.c-row__sub{display:block;font-size:15px;line-height:1.45;color:var(--text-2);margin-top:2px}
.g-read .c-bay__more a{color:var(--knect)}
@media (prefers-reduced-motion:reduce){ .c-row{transition:none} }

/* The close: the other route Aether sells through. */
.c-close{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) var(--s6);align-items:start}
.c-close .a-h2{color:var(--on-deep)}
.c-close .a-framed{margin-top:0}

/* Core Access or a bridge: two columns, each ending on its forward door. */
.c-fit .a-split{align-items:start}

@media (max-width:1100px){
  .c-bay{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "stage" "buy" "facts";gap:0}
  .c-bay__stage{margin:var(--s4) 0 var(--s5)}
  .c-bay .a-facts{margin-top:var(--s5)}
  .c-bay__stage{max-width:760px}
  .c-close{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .c-side{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}
@media (max-width:620px){
  .c-open{padding-block:var(--s5)}
  .c-bay .a-facts{padding-top:var(--s4)}
  /* At phone width the drawing's labels fall under legible size, and the
     order rows beside it already name every part. */
  .c-stage .c-txt{display:none}
  .c-side__shot{height:130px}
}