@font-face {

      font-family: "Object Sans";

      src: url("fonts/ObjectSans-Regular.woff2") format("woff2");

      font-weight: 400;

      font-style: normal;

    }

    * {

      box-sizing: border-box;

    }

    html {

      font-size: clamp(13px, 1.6vw, 15px);

    }

    body {

      margin: 0;

      background: #fff;

      color: #202122;

      font-family: Arial, Helvetica, sans-serif;

      font-size: 1rem;

      line-height: 1.65;

    }

    a {

      color: #36c;

      text-decoration: none;

    }

    a:hover {

      text-decoration: underline;

    }

    /* UNIVERSAL WIDTH */

    .site-width {

      width: min(100%, 600px);

      margin: 0 auto;

    }

    /* =========================================*

*   HEADER*

*========================================= */

.bar-wrap {

  width: 100%;

  padding: clamp(14px, 4vw, 32px);

}

.bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.bar img {

  width: 80px;

  aspect-ratio: 1 / 1;

  object-fit: cover;

}

.bar div:last-child {

  text-align: right;

}

.footer {

  font-size: 12px;

}

.footer img {

  width: 48px;

}

/* RIGHT  */

.site-meta {

  text-align: right;

  line-height: 1.2;

}

.site-name {

  font-size: clamp(18px, 4vw, 28px);



}

.site-url {

  margin-top: 3px;

  font-size: clamp(11px, 2.6vw, 14px);

  color: #54595d;

}

.site-semester {

  margin-top: 3px;

  font-size: clamp(11px, 2.8vw, 15px);

  color: #000;

}

    /* PAGE */

    .page {

      width: 100%;

      padding: clamp(14px, 4vw, 32px);

    }

    .content-column {

  width: min(100%, 42rem);

  margin: 0 auto;

}

    /* ARTICLE TYPE */

    h1.article-title {

      margin: 0 0 18px;

      padding-bottom: 6px;

      border-bottom: 1px solid #a2a9b1;

      font-family: Arial, Helvetica, sans-serif;

      font-size: clamp(24px, 5vw, 34px);

      font-weight: 400;

      line-height: 1.25;

      color: #000;

    }

    h2 {

      margin: 28px 0 10px;

      padding-bottom: 4px;

      border-bottom: 1px solid #a2a9b1;

      font-family: 'Roboto', sans-serif;

      font-size: clamp(20px, 5vw, 26px);

      font-weight: 400;

      color: #000;

    }

    h3 {

      margin: 22px 0 8px;

      font-size: clamp(15px, 4vw, 18px);

      font-weight: 700;

      color: #000;

    }

    p,

    li {

      font-size: clamp(13px, 3.45vw, 15px);

      line-height: 1.65;

    }

    p {

      margin: 0 0 14px;

    }

    strong {

      font-weight: 700;

    }

    /* BLOG LINK */

    .blog-link {

      display: inline-block;

      margin: 0 0 24px;

      font-size: clamp(22px, 6vw, 30px);

      line-height: 1;

      color: #55bfff;

      text-decoration: underline;

      text-decoration-thickness: 2px;

      text-underline-offset: 3px;

    }

    /* WIKI IMAGE BOX */

    .wiki-image-box {

      width: 185px;

      margin: 0 auto 20px;

      border: 1px solid #a2a9b1;

      background: #f8f9fa;

      padding: 3px;

      font-size: 11px;

      line-height: 1.35;

      color: #202122;

    }

    .wiki-image-box img {

      display: block;

      width: 100%;

      height: auto;

      border: 0;

      margin: 0;

    }

    .wiki-image-box video {

  display: block;

  width: 100%;

  height: auto;

  background: #fff;

}

.wiki-image-box-video {

      width: 300px;

      margin: 0 auto 20px;

      border: 1px solid #a2a9b1;

      background: #f8f9fa;

      padding: 3px;

      font-size: 11px;

      line-height: 1.35;

      color: #202122;

    }

        .wiki-image-box-video video {

  display: block;

  width: 100%;

  height: auto;

  background: #fff;

}

.wiki-side-by-side {

  display: flex;

  gap: 12px;

  align-items: normal;

  margin: 0 0 20px;

  flex-wrap: wrap;

  justify-content: center; /* centers the boxes */

}

.wiki-side-by-side .wiki-image-box,

.wiki-side-by-side .wiki-model-box {

  margin: 0;

}



    .wiki-caption {

      margin-top: 4px;

    }

    .wiki-image-box.medium {

      width: min(240px, 100%);

    }

    .wiki-image-box.large {

      width: min(300px, 100%);

    }

    .wiki-model-box {

  width: 185px;

  margin: 0 auto 20px;

  border: 1px solid #a2a9b1;

  background: #f8f9fa;

  padding: 3px;

  font-size: 11px;

  line-height: 1.35;

  color: #202122;

}

.wiki-model-box model-viewer {

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  background: #fff;

}

/* optional sizes */

.wiki-model-box.medium {

  width: min(240px, 100%);

}

.wiki-model-box.large {

  width: min(300px, 100%);

}

/* GRID BOX — matches .wiki-box-row proportions, one shared caption */

/* GRID BOX — natural image proportions, one shared caption */

.wiki-grid-box {

  width: 100%;

  margin: 0 0 20px;

  border: 1px solid #a2a9b1;

  background: #f8f9fa;

  padding: 3px;

  font-size: 11px;

  line-height: 1.35;

  color: #202122;

}

.wiki-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 3px;

  width: 100%;

  align-items: start;

}

.wiki-grid img,

.wiki-grid model-viewer {

  display: block;

  width: 100%;

  height: auto;

  background: #fff;

}

/* GLTFs still need a declared ratio */

.wiki-grid model-viewer {

  aspect-ratio: 1 / 1;

}

.wiki-grid-caption {

  margin-top: 4px;

}

.portal-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin: 0 0 24px;

}

.portal-buttons img {

  width: 160px;

  height: 52px;

  display: block;

}

.portal-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin: 0 0 24px;

}

/* base button */

.portal-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 160px;

  height: 52px;

  border-radius: 14px;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  font-weight: bold;

  text-decoration: none;

  color: white;

  transition: transform 0.15s ease,

              opacity 0.15s ease;

}

/* hover */

.portal-btn:hover {

  transform: translateY(-2px);

  opacity: 0.92;

  text-decoration: none;

}

/* colors */

.orange {

  background: #ff8c42;

}

.blue {

  background: #55bfff;

}

.green {

  background: #5bbd72;

}

.yellow {

  background: #f2c94c;

  color: #222;

}

/* mobile */

@media (max-width: 390px) {

  .portal-buttons {

    gap: 8px;

  }

  .portal-btn {

    width: 140px;

    height: 46px;

    font-size: 13px;

    border-radius: 12px;

  }

}



@media (max-width: 390px) {

  .wiki-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}





.wiki-grid-caption {

  margin-top: 4px;

}











    /* LISTS */

    ul,

    ol {

      margin: 0 0 16px 24px;

      padding: 0;

    }

    li {

      margin-bottom: 6px;

    }

    /* ARTICLE HUB */

    .section-title {

      margin: 0 0 18px;

      padding-bottom: 4px;

      border-bottom: 1px solid #a2a9b1;

      font-family: 'Roboto', sans-serif;

      font-size: clamp(20px, 5vw, 26px);

      font-weight: 400;

      color: #000;

    }

    .article-list {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .article-item {

      padding: 0 0 18px;

      margin: 0 0 18px;

      border-bottom: 1px solid #eaecf0;

    }

    .article-row {

      display: flex;

      justify-content: space-between;

      align-items: baseline;

      gap: 18px;

    }

    .hub-article-title {

      font-size: clamp(13px, 3.45vw, 15px);

      font-weight: 700;

      color: #36c;

    }

    .article-date {

      flex-shrink: 0;

      font-size: clamp(11px, 3vw, 13px);

      color: #54595d;

      text-align: right;

    }

    .article-subtitle {

      margin-top: 3px;

      font-size: clamp(12px, 3.2vw, 14px);

      color: #202122;

      line-height: 1.45;

    }

    .read-more {

  display: inline-block;

  margin-top: 8px;

  font-size: clamp(13px, 3.4vw, 15px);

  color: #36c;

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 2px;

  cursor: pointer;

}

.read-more-wrap {

  text-align: right;

  margin-bottom: 20px;

}

.read-more:hover {

  color: #2a4b8d;

}

.read-topic {

  font-weight: 600;

}









/* MOBILE */





    .wiki-box-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin: 0 0 20px;

}

.wiki-box-row .wiki-image-box {

  width: 100%;

  margin: 0;

}



.wiki-media-scroll {

  width: 100%;

  margin: 0 0 20px;

  overflow-x: auto;

  overflow-y: hidden;

  display: flex;

  gap: 12px;

  padding: 0 0 10px;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

}

.wiki-media-scroll .wiki-image-box,

.wiki-media-scroll .wiki-model-box {

  flex: 0 0 185px;

  width: 185px;

  margin: 0;

  scroll-snap-align: start;

}

.wiki-media-scroll .medium {

  flex-basis: 240px;

  width: 240px;

}

.wiki-media-scroll .large {

  flex-basis: 300px;

  width: 300px;

}

/* keeps GLTF square inside the box */

.wiki-model-box model-viewer {

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  background: #fff;

}

/* optional: thinner scrollbar */

.wiki-media-scroll::-webkit-scrollbar {

  height: 6px;

}

.wiki-media-scroll::-webkit-scrollbar-thumb {

  background: #a2a9b1;

}

.wiki-media-scroll::-webkit-scrollbar-track {

  background: #f8f9fa;

}







/* stack on small screens */

@media (max-width: 390px) {

  .wiki-box-row {

    grid-template-columns: repeat(2, 1fr);

  }

}





    /* DESKTOP */

    @media (min-width: 900px) {

      p,

      li {

        font-size: 15px;

        line-height: 1.75;

      }

    }

    /* IPHONE 13 MINI / SMALL SCREENS */

    @media (max-width: 390px) {

      .page {

        padding-left: 18px;

        padding-right: 18px;

      }

      .content-column {

        width: 100%;

      }

      .site-identity .brand-name {

        font-size: 28px;

      }

      .site-identity .domain {

        font-size: 10px;

      }

      .wiki-image-box {

        width: 185px;

      }

      .article-row {

        gap: 12px;

      }
      /* PAYWHIRL PORTAL */

.paywhirl-portal {
  width: 100%;
  margin-top: 30px;
}

    }