/* Individual page introductions share one component. The home/fan artwork is
   a hero, while article introductions use the same text roles inside an article. */
.site-page-intro {
  box-sizing:border-box;
  width:min(var(--site-content-max,1480px),calc(100% - 24px));
  margin:20px auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid var(--maple-line);
  border-radius:20px;
  background:var(--maple-surface);
  box-shadow:0 3px 0 #e4d7bf;
  color:var(--maple-text);
}
.site-page-intro__icon {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:0 0 64px;
  width:64px;
  height:64px;
  padding:10px;
  border:1px solid var(--maple-line);
  border-radius:16px;
  background:var(--maple-panel);
}
.site-page-intro__icon img {display:block;width:42px;height:42px;max-width:100%;object-fit:contain}
.site-page-intro__body {flex:1;min-width:0;display:block}
.site-page-intro .site-page-intro__path {margin:0 0 4px;color:var(--maple-muted);font-size:var(--ui-type-note-size);line-height:1.5;font-weight:400;letter-spacing:0}
.site-page-intro .site-page-intro__title {margin:0;color:var(--maple-text)}
.site-page-intro .site-page-intro__description {margin:6px 0 0;color:var(--maple-muted);white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.site-page-intro__meta {margin-left:auto;flex:0 0 auto;display:flex;gap:6px;align-items:center;color:var(--maple-muted);font-size:var(--ui-type-note-size)}
.site-page-intro--article {width:100%;margin:0 0 24px;box-shadow:none}
@media(max-width:899px){
  .site-page-intro {margin:16px auto;padding:16px;gap:12px;border-radius:16px;align-items:flex-start;flex-wrap:wrap}
  .site-page-intro__icon {flex-basis:52px;width:52px;height:52px;padding:8px;border-radius:13px}
  .site-page-intro__icon img {width:34px;height:34px}
  .site-page-intro__body {flex-basis:calc(100% - 64px)}
  .site-page-intro__meta {flex-basis:calc(100% - 64px);min-width:0;margin-left:64px;flex-wrap:wrap}
  .site-page-intro--article {margin-top:0;margin-bottom:20px}
}