/* Network to Index: an editorial, still-image opening. */
.network-hero {
  overflow:hidden;
  background:#0c0705;
  isolation:isolate;
}
.network-layout {
  width:min(1400px,calc(100% - 112px));
  margin:0 auto;
  padding:70px 0 32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  column-gap:48px;
  align-items:start;
}
.network-intro {grid-column:1;grid-row:1;position:relative;z-index:1;}
.network-eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 28px;
  color:var(--gold);
  font:10px/1.5 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.network-eyebrow>span {color:var(--lilac);}
.network-title {
  margin:0;
  color:var(--fg);
  font:400 clamp(64px,6.5vw,100px)/1.03 var(--sans);
  letter-spacing:-.055em;
}
.network-title>span,.network-title>em {display:block;}
.network-title>em {
  padding-top:.05em;
  font:italic 400 1.1em/.96 var(--serif);
  letter-spacing:-.045em;
  color:inherit;
}
.network-lede {
  grid-column:1;
  grid-row:2;
  max-width:570px;
  margin:28px 0 0;
  color:#c4baae;
  font:15px/1.85 var(--sans);
}
.network-actions {
  grid-column:1;
  grid-row:3;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:30px 0 0;
}
.network-actions .btn {
  min-height:52px;
  min-width:180px;
  padding:14px 25px;
  font-size:13px;
  border-radius:4px;
  box-shadow:none;
}
.network-actions .network-secondary {background:transparent;color:var(--fg);border-color:#a9906a;}
.network-actions .network-secondary:hover {background:#d8bf9110;border-color:var(--gold);}
.network-art {
  grid-column:2;
  grid-row:1 / 4;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  margin:0;
  position:relative;
}
.network-art>img {
  display:block;
  width:calc(100% + 180px);
  max-width:none;
  height:auto;
  margin-left:-95px;
  mix-blend-mode:lighten;
  /* Fade only the background perimeter so the engraving meets the page. */
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 96%,transparent);
}
.network-caption {
  display:flex;
  align-items:center;
  gap:22px;
  max-width:470px;
  margin:18px 0 0 22px;
  color:var(--gold);
  font:9px/1.5 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.network-caption>span:not(.network-rule) {white-space:nowrap;}
.network-rule {height:1px;flex:1;background:#a58a5a;}
.network-rule:after {content:'';display:block;width:4px;height:4px;margin:-1.5px 0 0 auto;background:var(--lilac);}
.network-foot {
  grid-column:1 / -1;
  grid-row:4;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:60px;
  margin-top:58px;
  padding-top:23px;
  border-top:1px solid var(--line);
}
.network-gate {max-width:615px;font:11px/1.8 var(--sans);color:var(--muted);}
.network-reference {width:330px;max-width:100%;flex-shrink:0;}
.network-reference .art-caption {font-size:9px;gap:15px;}
.network-reference .hw-usd {font-size:19px;white-space:nowrap;}
.network-reference .raw-marks {font-size:10px;margin-top:8px;}
.network-reference .raw-marks summary {min-height:32px;display:list-item;}
.network-reference .dr {flex-wrap:wrap;gap:4px 14px;}

@media(min-width:601px) and (max-width:1100px) {
  .network-layout {width:calc(100% - 72px);padding-top:52px;column-gap:25px;grid-template-columns:1fr 1fr;}
  .network-title {font-size:clamp(55px,6.6vw,72px);}
  .network-lede {font-size:14px;line-height:1.8;}
  .network-art>img {width:calc(100% + 85px);margin-left:-20px;}
  .network-actions {gap:10px;}
  .network-actions .btn {min-width:0;flex:1;padding-inline:12px;font-size:12px;}
  .network-caption {font-size:8px;letter-spacing:.08em;gap:12px;margin-left:0;}
  .network-foot {gap:35px;margin-top:40px;}
  .network-reference {width:280px;}
}
@media(min-width:601px) and (max-width:800px) {
  .network-layout {width:calc(100% - 48px);column-gap:20px;}
  .network-title {font-size:52px;}
  .network-eyebrow {font-size:9px;letter-spacing:.13em;gap:12px;}
  .network-lede {grid-column:1 / -1;max-width:580px;margin-top:28px;}
  .network-art {grid-row:1;}
  .network-art>img {width:calc(100% + 50px);}
  .network-actions {grid-column:1 / -1;justify-content:flex-start;}
  .network-actions .btn {flex:none;min-width:170px;}
  .network-foot {gap:25px;}
  .network-reference {width:255px;}
}

/* Phone composition: title, compact image, actions, then the full explanation. */
@media(max-width:600px) {
  .network-layout {
    width:calc(100% - 40px);
    padding:30px 0 26px;
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
  }
  .network-intro {grid-column:1;grid-row:1;}
  .network-eyebrow {font-size:9px;letter-spacing:.16em;gap:14px;margin-bottom:20px;}
  .network-title {font-size:clamp(49px,13.4vw,64px);line-height:1.01;letter-spacing:-.05em;}
  .network-title>em {font-size:1.08em;line-height:.96;}
  .network-art {grid-column:1;grid-row:2;margin:0 -20px;align-self:auto;}
  .network-art>img {
    width:100%;
    height:clamp(200px,55vw,260px);
    object-fit:cover;
    object-position:center 48%;
    margin:0;
    mask-image:linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);
  }
  .network-caption {font-size:8px;letter-spacing:.1em;gap:15px;max-width:none;margin:0 20px 0;}
  .network-actions {grid-column:1;grid-row:3;flex-wrap:nowrap;gap:12px;margin:24px 0 0;}
  .network-actions .btn {flex:1;min-width:0;min-height:50px;padding:13px 10px;font-size:12px;}
  .network-lede {grid-column:1;grid-row:4;max-width:none;margin-top:26px;font-size:14px;line-height:1.8;}
  .network-foot {grid-column:1;grid-row:5;display:grid;grid-template-columns:1fr;margin-top:26px;padding-top:22px;gap:22px;}
  .network-reference {grid-row:1;width:100%;}
  .network-reference .art-caption {font-size:9px;}
  .network-reference .hw-usd {font-size:20px;}
  .network-reference .raw-marks summary {min-height:44px;padding:8px 0;}
  .network-gate {font-size:11px;line-height:1.8;max-width:none;}
}
@media(max-width:360px) {
  .network-title {font-size:46px;}
  .network-actions {gap:10px;}
  .network-actions .btn {font-size:11px;}
  .network-caption {font-size:7px;}
}
