/* The Home photo, type and action treatment adapted for a browsable directory. */
body.ei-makers {
  --maker-surface:#11171c;
  --maker-white:#f5f5f1;
  --maker-lead:#e2e5e7;
  --maker-muted:#cbd2d7;
  --maker-rule:#ffffff35;
  --maker-accent:#f04b68;
  --maker-header:104px;
  --maker-gutter:clamp(24px,6.5vw,104px);
  background:var(--maker-surface);
  color:var(--maker-white);
}
.ei-makers main.maker-main {background:var(--maker-surface);color:var(--maker-white)}
html.uniform-scrolled body.ei-makers>header.uniform-header {background:#10161bed}
.ei-makers .maker-main :is(a,summary):focus-visible {outline:2px solid #fff;outline-offset:4px}
.maker-shell {width:min(100%,1320px);margin-inline:auto}
.maker-scene .maker-shell {max-width:1120px}
.maker-scene {
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:end;
  min-height:100svh;
  padding:calc(var(--maker-header) + 24px) var(--maker-gutter) clamp(42px,11svh,102px);
  background:var(--maker-surface);
}
.maker-photo,.maker-scene::before {position:absolute;inset:0;z-index:-2}
.maker-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:var(--maker-photo-position,60% 47%)}
.maker-scene::before {
  content:"";
  z-index:-1;
  background:linear-gradient(90deg,#11171ce8 0%,#11171ca6 33%,#11171c0a 80%),linear-gradient(0deg,#11171cf5 0%,#11171c30 70%,#0b101728);
}
.maker-kicker {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 15px;
  font:600 12px/1.45 "IBM Plex Sans",Arial,sans-serif;
  color:var(--maker-lead);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.maker-kicker::before {content:"";width:30px;height:2px;margin-right:3px;background:var(--maker-accent)}
.maker-kicker a:hover {text-decoration:underline;text-underline-offset:4px}
.maker-kicker [aria-hidden] {color:#a7b0b7}
.maker-display {
  color:var(--maker-white);
  font:600 clamp(72px,9vw,136px)/.97 "EI Display","Arial Narrow",Impact,sans-serif;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.maker-lead {max-width:43ch;margin-top:16px;color:var(--maker-lead);font-size:clamp(16px,1.3vw,19px);line-height:1.55}
.maker-action {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:48px;
  margin-top:23px;
  color:var(--maker-white);
  border-bottom:1px solid #ffffff9c;
  font-size:16px;
  font-weight:600;
}
.maker-action:hover {border-color:#fff;color:#fff}
.maker-action svg {flex:none}
.maker-directory {
  display:grid;
  align-items:center;
  min-height:100svh;
  padding:calc(var(--maker-header) + 22px) var(--maker-gutter) 42px;
  background:radial-gradient(ellipse at 92% 0%,#202a31 0%,transparent 60%),linear-gradient(135deg,#171c21,#11171c 72%);
  border-top:1px solid var(--maker-rule);
}
.maker-directory-intro {margin:0 0 clamp(20px,3svh,34px)}
.maker-directory-intro .maker-display {font-size:clamp(54px,5.8vw,88px)}
.maker-directory-intro .maker-lead {max-width:65ch;margin-top:9px;font-size:16px;color:var(--maker-muted)}
.maker-directory-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.2vw,68px)}
.maker-directory-grid section {min-width:0}
.maker-components {position:relative}
.maker-component-panel {min-width:0}
.maker-motion {
  position:absolute;
  right:16px;
  bottom:12px;
  z-index:3;
  width:44px;
  height:44px;
  place-items:center;
  padding:0;
  border:1px solid #ffffff4f;
  border-radius:8px;
  background:#10161bcc;
  backdrop-filter:blur(9px);
  box-shadow:0 3px 14px #0005;
  color:var(--maker-white);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, background .16s ease, border-color .16s ease;
}
.maker-motion:not([hidden]) {display:grid}
.maker-component-panel:hover .maker-motion,.maker-motion:focus-visible {opacity:1;pointer-events:auto}
.maker-motion:hover {background:#10161bf2;border-color:#ffffff8c}
.maker-motion svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.maker-motion .maker-motion-play,.maker-motion[data-paused="true"] .maker-motion-pause {display:none}
.maker-motion[data-paused="true"] .maker-motion-play {display:block}
.maker-component-scroll {
  min-height:0;
  max-height:28rem;
  overflow-y:scroll;
  margin-top:10px;
  padding-right:8px;
  scrollbar-color:#83919c #252e36;
  scrollbar-width:thin;
}
@supports selector(::-webkit-scrollbar) {
  .maker-component-scroll {scrollbar-width:auto;scrollbar-color:auto}
  .maker-component-scroll::-webkit-scrollbar {width:8px}
  .maker-component-scroll::-webkit-scrollbar-track {background:#252e36}
  .maker-component-scroll::-webkit-scrollbar-thumb {background:#83919c;border:1px solid #252e36;border-radius:5px}
}
.ei-makers .maker-component-scroll:focus-visible,.ei-makers .maker-motion:focus-visible {outline:2px solid #fff;outline-offset:4px}
.maker-directory .maker-component-scroll .brand-table {margin-top:0}
.maker-component-scroll .brand-table thead th {
  position:sticky;
  top:0;
  z-index:1;
  background:#151b20;
  box-shadow:0 1px var(--maker-rule);
}
@media(min-width:960px) {
  .maker-component-panel {position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
  .maker-component-scroll {max-height:none}
}
.maker-group-title {
  color:var(--maker-white);
  font:600 clamp(18px,1.7vw,24px)/1.25 "IBM Plex Sans",Arial,sans-serif;
  scroll-margin-top:calc(var(--maker-header) + 20px);
}
.maker-directory .brand-table {
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  margin:10px 0 0;
  border-top:1px solid var(--maker-rule);
  font-size:15px;
  line-height:1.42;
}
.maker-directory .brand-table :is(th,td) {
  padding:8px 10px;
  border:0;
  border-bottom:1px solid var(--maker-rule);
  color:var(--maker-muted);
  background:transparent;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
}
.maker-directory .brand-table th:first-child {padding-left:0}
.maker-directory .brand-table td:last-child,.maker-directory .brand-table th:last-child {padding-right:0}
.maker-directory .brand-table thead th {font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.maker-directory .brand-table thead th:first-child {width:40%}
.maker-directory .brand-table[aria-labelledby="rig-house-brands"] thead th:first-child {width:35%}
.maker-directory .brand-table tbody th {font:600 15px/1.42 "IBM Plex Sans",Arial,sans-serif;color:var(--maker-white);letter-spacing:normal}
.maker-directory .brand-table a {text-decoration:underline;text-underline-offset:4px;text-decoration-color:#f04b68}
.maker-directory .brand-table a:hover {color:#ffbdc8;text-decoration-color:currentColor}
.maker-close {
  --maker-photo-position:62% 50%;
  border-top:1px solid var(--maker-rule);
}
.maker-close .maker-photo {overflow:clip}
.maker-close::before {background:linear-gradient(90deg,#11171ce8 0%,#11171cb0 30%,#11171c05 74%),linear-gradient(0deg,#11171ce0 0%,#11171c36 48%,#11171c15 85%)}
.maker-close .maker-display {font-size:clamp(72px,8.7vw,136px)}
.maker-close .maker-lead {max-width:35ch}
.maker-close .maker-action {margin-top:28px}

@media(min-width:960px) and (min-height:600px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.makers-chapters {scroll-snap-type:y mandatory}
  .makers-chapters [data-maker-stop] {scroll-snap-align:start;scroll-snap-stop:always}
  .makers-chapters footer[data-maker-stop] {scroll-snap-align:end}
  html.makers-chapters:has(dialog[open],.ei-footer-explore[open]) {scroll-snap-type:none}
}
@supports (animation-timeline:view()) {
  @media(min-width:960px) and (prefers-reduced-motion:no-preference) {
    .maker-close {view-timeline-name:--maker-photo-passage}
    .maker-close .maker-photo img {
      animation:maker-photo-passage linear both;
      animation-timeline:--maker-photo-passage;
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes maker-photo-passage {
  from {transform:translateY(-2.5%) scale(1.06)}
  to {transform:translateY(2.5%) scale(1.06)}
}
html body.ei-makers footer.maker-footer {
  padding:24px max(var(--maker-gutter),calc((100vw - 1320px)/2)) 15px!important;
  gap:16px 30px;
}
.maker-footer .maker-footer-base {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 22px;
  border-top:1px solid var(--maker-rule);
  padding-top:10px;
}
.maker-footer .ei-footer-disclaimer {flex:1 1 490px;border:0;margin:0;padding:0;color:#b0bbc2;line-height:1.55}
.maker-footer .ei-footer-policy {gap:0 18px;padding:0}
.maker-footer:has(.ei-footer-explore[open]) .maker-footer-base {margin-top:22px}
@media(min-width:960px) and (max-height:800px) {
  .maker-directory {padding:calc(var(--maker-header) + 16px) clamp(28px,4.5vw,72px) 24px}
  .maker-directory-intro {margin-bottom:19px}
  .maker-directory-intro .maker-display {font-size:clamp(52px,5vw,72px)}
  .maker-directory .brand-table :is(th,td) {padding-block:5px}
}
@media(min-width:960px) and (max-width:1150px) and (max-height:800px),
       (min-width:1151px) and (max-width:1350px) and (max-height:740px) {
  .maker-directory {padding-inline:clamp(24px,3vw,36px)}
  .maker-directory-grid {gap:24px}
  .maker-directory .brand-table {font-size:14px;line-height:1.38}
  .maker-directory .brand-table tbody th {font-size:14px;line-height:1.38}
  .maker-directory .brand-table[aria-labelledby="rig-house-brands"] thead th:first-child {width:32%}
}
@media(max-width:959px) {
  .maker-directory-grid {grid-template-columns:1fr;gap:32px}
}
@media(max-width:700px) {
  body.ei-makers {--maker-header:90px}
  .maker-display {font-size:clamp(56px,16vw,82px)}
  .maker-kicker {font-size:11px;gap:8px}
  .maker-kicker::before {width:24px}
  .maker-hero {--maker-photo-position:62% 46%;padding-bottom:clamp(48px,11svh,90px)}
  .maker-hero::before {background:linear-gradient(0deg,#11171cf7,#11171cc9 31%,#11171c3d 74%),linear-gradient(90deg,#11171c62,transparent)}
  .maker-directory {padding:32px var(--maker-gutter) 38px;scroll-margin-top:var(--maker-header)}
  .maker-directory-intro .maker-display {font-size:clamp(42px,11vw,58px)}
  .maker-directory-intro .maker-lead {font-size:15px}
  .maker-directory .brand-table {font-size:14px}
  .maker-directory .brand-table[aria-labelledby="rig-house-brands"] thead th:first-child {width:40%}
  .maker-directory .brand-table tbody th {font-size:14px}
  .maker-close {--maker-photo-position:62% 48%;padding-bottom:clamp(48px,11svh,90px)}
  .maker-close .maker-display {font-size:clamp(54px,15vw,80px)}
  .maker-close::before {background:linear-gradient(0deg,#11171cf5 0%,#11171cc9 27%,#11171c26 66%)}
  html body.ei-makers footer.maker-footer {grid-template-columns:58px minmax(0,1fr);gap:10px 16px}
  .maker-footer .ei-footer-mark img {width:58px;height:58px}
}
@media(max-width:360px) {
  .maker-directory .brand-table :is(th,td) {padding-inline:5px}
  .maker-directory .brand-table th:first-child {padding-left:0}
}
@media(max-height:440px) and (min-width:701px) {
  body.ei-makers {--maker-header:72px}
  .maker-scene {padding-bottom:34px}
}