@charset "UTF-8";

.student-work-detail-page .subpage-hero { padding-bottom: clamp(44px, 5vw, 68px); }
.student-work-detail-hero-inner { max-width: 980px; }
.student-work-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 19px 0 13px; }
.student-work-detail-meta span { padding: 5px 9px; color: #176ca7; background: #e9f5fc; border-radius: 4px; font-size: 9px; font-weight: 850; }
.student-work-detail-meta time { color: #687f91; font-size: 10px; font-weight: 750; }
.student-work-detail-creator { display: flex; gap: 9px; align-items: center; margin: 20px 0 0; color: #173d5b; }
.student-work-detail-creator span { color: #6d8292; font-size: 9px; font-weight: 800; }
.student-work-detail-creator strong { font-size: 12px; }
.student-work-article-title-panel .student-work-detail-meta { margin-top: 0; }
.student-work-article-title-panel .student-work-detail-meta span { color: #d9eff9; background: rgba(255,255,255,.11); border-radius: 2px; }
.student-work-article-title-panel .student-work-detail-meta time { color: rgba(255,255,255,.68); }
.student-work-article-title-panel .student-work-detail-creator { color: #fff; }
.student-work-article-title-panel .student-work-detail-creator span { color: #91bbd1; }
.student-work-detail-content { padding-block: clamp(42px, 5vw, 68px) clamp(65px, 7vw, 92px); }
.student-work-detail-content > .subpage-section-inner { width: min(100% - 40px, 980px); }
.student-work-detail-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: clamp(34px, 5vw, 64px); align-items: center; }
.student-work-detail-main-media { margin: 0; overflow: hidden; background: #e8f1f6; border: 1px solid #c6d8e4; border-radius: 10px; box-shadow: 0 13px 32px rgba(8, 40, 66, .09); }
.student-work-detail-main-media > a { display: block; overflow: hidden; }
.student-work-detail-main-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.student-work-detail-main-media.is-illustration img { aspect-ratio: 16 / 10; object-fit: cover; }
.student-work-detail-main-media a:hover img, .student-work-detail-main-media a:focus-visible img { filter: saturate(1.06); transform: scale(1.018); }
.student-work-detail-main-media figcaption { padding: 9px 11px 10px; color: #5f7586; background: #fff; font-size: 9px; line-height: 1.6; }
.student-work-detail-section-label, .student-work-detail-points > header p, .student-work-detail-related > header p { margin: 0 0 8px; color: #1575b4; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.student-work-detail-overview h2, .student-work-detail-points h2, .student-work-detail-related h2, .student-work-detail-gallery h2, .student-work-detail-video h2 { margin: 0; color: #092a46; font-size: clamp(23px, 3vw, 31px); line-height: 1.5; }
.student-work-detail-overview h2 { font-size: clamp(23px, 2.5vw, 28px); }
.student-work-detail-overview > p:not(.student-work-detail-section-label) { margin: 16px 0 0; color: #4c6578; font-size: 13px; line-height: 2; }
.student-work-detail-points { margin-top: clamp(58px, 7vw, 86px); }
.student-work-detail-points > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.student-work-detail-points article { min-width: 0; padding: 19px 18px 21px; background: #f2f7fa; border-top: 3px solid #6eb8e6; border-radius: 0 0 7px 7px; }
.student-work-detail-points article > span { color: #7ca3bd; font-size: 10px; font-weight: 850; }
.student-work-detail-points h3 { margin: 12px 0 0; color: #113853; font-size: 16px; line-height: 1.55; }
.student-work-detail-points article p { margin: 9px 0 0; color: #5b7182; font-size: 11px; line-height: 1.8; }
.student-work-detail-gallery, .student-work-detail-video { margin-top: clamp(60px, 7vw, 88px); padding-top: 28px; border-top: 1px solid #bfd1dd; }
.student-work-detail-gallery > header, .student-work-detail-video > header { display: flex; flex-wrap: wrap; gap: 8px 25px; justify-content: space-between; align-items: end; }
.student-work-detail-gallery > header p, .student-work-detail-video > header p { max-width: 34em; margin: 0; color: #657a8a; font-size: 10px; }
.student-work-detail-gallery > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 24px; }
.student-work-detail-gallery figure { min-width: 0; margin: 0; overflow: hidden; background: #f2f7fa; border: 1px solid #c9d9e4; border-radius: 8px; }
.student-work-detail-gallery a { display: block; overflow: hidden; }
.student-work-detail-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .22s ease; }
.student-work-detail-gallery a:hover img, .student-work-detail-gallery a:focus-visible img { transform: scale(1.025); }
.student-work-detail-gallery figcaption { padding: 9px 11px 10px; color: #5d7485; background: #fff; font-size: 9px; line-height: 1.55; }
.student-work-detail-video-frame { position: relative; margin-top: 23px; overflow: hidden; aspect-ratio: 16 / 9; background: #071321; border-radius: 9px; }
.student-work-detail-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.student-work-detail-related { margin-top: clamp(62px, 7vw, 92px); padding: clamp(25px, 4vw, 38px); background: #092d4a; border-radius: 10px; }
.student-work-detail-related > header p { color: #79c7f5; }
.student-work-detail-related h2 { color: #fff; }
.student-work-detail-related nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 23px; }
.student-work-detail-related a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 14px 15px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
.student-work-detail-related a:hover, .student-work-detail-related a:focus-visible { color: #fff; background: rgba(255,255,255,.14); }
.student-work-detail-related a span, .student-work-detail-related a strong { grid-column: 1; }
.student-work-detail-related a span { color: #89cef6; font-size: 8px; font-weight: 800; }
.student-work-detail-related a strong { font-size: 12px; line-height: 1.55; }
.student-work-detail-related a i { grid-column: 2; grid-row: 1 / 3; font-style: normal; }
.student-work-detail-back { margin-top: 25px; }
.student-work-detail-back a { color: #27668e; font-size: 11px; font-weight: 800; }

/* Campus Compass */
.location-sharing-app-page .student-work-detail-content > .subpage-section-inner { width: min(100% - 48px, 1080px); }
.location-app-hero .student-work-detail-hero-inner { max-width: 1080px; }
.location-app-hero .breadcrumbs { margin-bottom: 20px; }
.location-app-title-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); gap: clamp(30px, 5vw, 62px); align-items: center; padding: clamp(31px, 5vw, 54px); color: #fff; background: linear-gradient(125deg, #092d4a 0%, #0d4568 68%, #176f80 100%); }
.location-app-title-copy { min-width: 0; }
.location-app-title-panel .student-work-detail-meta { margin-top: 0; }
.location-app-title-panel .student-work-detail-meta span { color: #d9eff9; background: rgba(255,255,255,.11); border-radius: 2px; }
.location-app-title-panel .student-work-detail-meta time { color: rgba(255,255,255,.68); }
.location-app-hero h1 { display: grid; gap: 6px; }
.location-app-hero h1 > span { color: #fff; font-size: clamp(38px, 5vw, 62px); letter-spacing: -.045em; }
.location-app-hero h1 > small { color: #bcd8e8; font-size: clamp(16px, 2vw, 22px); font-weight: 720; letter-spacing: .01em; }
.location-app-title-panel .subpage-lead { max-width: 650px; color: rgba(255,255,255,.78); }
.location-app-use-badge { color: #bff4df !important; background: rgba(69, 193, 142, .16) !important; }
.location-app-title-panel .student-work-detail-creator { color: #fff; }
.location-app-title-panel .student-work-detail-creator > span { color: #91bbd1; }
.location-app-creator-link { display: inline-flex; gap: 7px; align-items: center; color: #fff; text-decoration: none; }
.location-app-creator-link i { color: #7fd3ed; font-size: 11px; font-style: normal; transition: transform .18s ease; }
.location-app-creator-link:hover, .location-app-creator-link:focus-visible { color: #fff; }
.location-app-creator-link:hover strong, .location-app-creator-link:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.location-app-creator-link:hover i, .location-app-creator-link:focus-visible i { transform: translateX(2px); }
.location-app-title-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.location-app-title-nav > p { grid-column: 1 / -1; margin: 0 0 3px; color: #bcd8e8; font-size: 9px; font-weight: 780; }
.location-app-title-nav a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 56px; padding: 10px 12px; color: #fff; background: rgba(255,255,255,.1); }
.location-app-title-nav a:last-child { grid-column: 1 / -1; }
.location-app-title-nav a:hover, .location-app-title-nav a:focus-visible { color: #092d4a; background: #fff; }
.location-app-title-nav a > span { color: #7fd3ed; font-size: 9px; font-weight: 850; }
.location-app-title-nav a:hover > span, .location-app-title-nav a:focus-visible > span { color: #167ba5; }
.location-app-title-nav a strong { font-size: 11px; line-height: 1.4; }
.location-app-title-nav a i { font-size: 10px; font-style: normal; }
.location-app-main-media { margin: 0; overflow: hidden; background: #eaf5fa; border: 1px solid #c5dbe7; border-radius: 4px; box-shadow: 0 18px 48px rgba(11, 53, 83, .12); }
.location-app-main-media > a { display: block; overflow: hidden; }
.location-app-main-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.location-app-main-media a:hover img, .location-app-main-media a:focus-visible img { filter: saturate(1.04); transform: scale(1.012); }
.location-app-main-media figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: baseline; padding: 15px 18px 17px; color: #5d7383; background: #fff; font-size: 10px; line-height: 1.7; }
.location-app-main-media figcaption strong { color: #123d5a; font-size: 12px; }
.location-app-introduction { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(260px, .58fr); gap: clamp(36px, 6vw, 72px); align-items: start; margin-top: clamp(52px, 7vw, 82px); }
.location-app-introduction h2, .location-app-flow h2, .location-app-screens h2 { margin: 0; color: #092a46; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.45; }
.location-app-introduction > div > p:not(.student-work-detail-section-label) { margin: 17px 0 0; color: #4c6578; font-size: 13px; line-height: 2; }
.location-app-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; overflow: hidden; background: #edf6fa; border: 1px solid #c5dbe7; border-radius: 2px; }
.location-app-facts div { min-width: 0; padding: 15px; border-right: 1px solid #cbdde7; border-bottom: 1px solid #cbdde7; }
.location-app-facts div:nth-child(2n) { border-right: 0; }
.location-app-facts div:nth-last-child(-n + 2) { border-bottom: 0; }
.location-app-facts dt { color: #6e8798; font-size: 8px; font-weight: 850; letter-spacing: .05em; }
.location-app-facts dd { margin: 6px 0 0; color: #153d58; font-size: 11px; font-weight: 760; line-height: 1.65; }
.location-app-flow { margin-top: clamp(62px, 8vw, 96px); padding: clamp(28px, 4vw, 42px); background: linear-gradient(135deg, #e8f6fd 0%, #f4fafc 55%, #e7f7f0 100%); border: 1px solid #c6dde9; border-radius: 3px; }
.location-app-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 24px; align-items: end; }
.location-app-section-heading > div { min-width: 0; }
.location-app-section-heading > div > p { max-width: 58em; margin: 8px 0 0; color: #5e788a; font-size: 10px; line-height: 1.8; }
.location-app-flow ol { display: grid; grid-template-columns: minmax(0, 1fr); margin: 29px 0 0; padding: 0; overflow: hidden; background: rgba(255,255,255,.82); border: 1px solid rgba(162, 195, 211, .72); border-radius: 2px; box-shadow: 0 8px 22px rgba(14, 62, 91, .06); list-style: none; counter-reset: none; }
.location-app-flow li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; min-width: 0; padding: 21px 22px; border-bottom: 1px solid #cfdee7; }
.location-app-flow li:last-child { border-bottom: 0; }
.location-app-flow li:not(:last-child)::after { position: absolute; bottom: -13px; left: 25px; z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; color: #2588bd; background: #eef9fd; border: 1px solid #c5dce8; border-radius: 50%; font-size: 13px; font-weight: 850; content: "↓"; }
.location-app-flow li > span { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: #1688c8; border-radius: 50%; font-size: 8px; font-weight: 850; }
.location-app-flow li > div { display: grid; grid-template-columns: minmax(160px, .72fr) minmax(0, 1.28fr); gap: 0 27px; align-items: start; }
.location-app-flow li small { color: #648294; font-size: 8px; font-weight: 800; }
.location-app-flow li h3 { margin: 7px 0 0; color: #103852; font-size: 15px; line-height: 1.55; }
.location-app-flow li p { grid-column: 2; grid-row: 1 / 3; margin: 0; color: #577082; font-size: 10px; line-height: 1.85; }
.location-app-screens { margin-top: clamp(65px, 8vw, 100px); }
.location-app-image-help { align-self: end; padding-bottom: 4px; color: #6a8191; font-size: 9px; }
.location-app-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 27px; }
.location-app-screen-grid article { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #c7d9e4; border-radius: 3px; box-shadow: 0 10px 28px rgba(10, 48, 75, .07); }
.location-app-screen-grid figure { margin: 0; overflow: hidden; background: #eaf3f7; border-bottom: 1px solid #c7d9e4; }
.location-app-screen-grid figure a { display: block; overflow: hidden; }
.location-app-screen-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; transition: transform .22s ease; }
.location-app-screen-grid a:hover img, .location-app-screen-grid a:focus-visible img { transform: scale(1.018); }
.location-app-screen-grid article > div { padding: 18px 19px 21px; }
.location-app-screen-grid article > div > span { color: #1478b7; font-size: 8px; font-weight: 850; }
.location-app-screen-grid h3 { margin: 8px 0 0; color: #123a55; font-size: 17px; line-height: 1.5; }
.location-app-screen-grid p { margin: 9px 0 0; color: #5b7283; font-size: 10px; line-height: 1.85; }
.location-app-related { margin-top: clamp(66px, 8vw, 100px); background: linear-gradient(135deg, #0b3555 0%, #163f5f 100%); border-radius: 3px; }

@media (max-width: 760px) {
  .student-work-detail-content > .subpage-section-inner { width: min(100% - 30px, 980px); }
  .student-work-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .student-work-detail-main-media img { aspect-ratio: 16 / 10; }
  .student-work-detail-overview h2, .student-work-detail-points h2, .student-work-detail-related h2, .student-work-detail-gallery h2, .student-work-detail-video h2 { font-size: 23px; }
  .student-work-detail-overview > p:not(.student-work-detail-section-label) { font-size: 12px; line-height: 1.9; }
  .student-work-detail-points > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .student-work-detail-points article { padding: 16px 15px 18px; }
  .student-work-detail-gallery > header, .student-work-detail-video > header { display: grid; align-items: start; }
  .student-work-detail-gallery > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .student-work-detail-related { padding: 23px 17px; }
  .student-work-detail-related nav { grid-template-columns: minmax(0, 1fr); }
  .location-sharing-app-page .student-work-detail-content > .subpage-section-inner { width: min(100% - 30px, 1080px); }
  .location-app-hero .breadcrumbs { margin-bottom: 15px; }
  .location-app-title-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 25px 18px 18px; }
  .location-app-hero h1 > span { font-size: clamp(29px, 9.2vw, 36px); white-space: nowrap; }
  .location-app-hero h1 > small { font-size: 16px; line-height: 1.6; }
  .location-app-title-panel .subpage-lead { font-size: 11px; line-height: 1.8; }
  .location-app-title-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .location-app-title-nav > p { display: none; }
  .location-app-title-nav a, .location-app-title-nav a:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; min-height: 46px; padding: 8px 9px; }
  .location-app-title-nav a > span { display: none; }
  .location-app-title-nav a strong { font-size: 9px; }
  .location-app-main-media { border-radius: 3px; }
  .location-app-main-media figcaption { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 13px 14px; }
  .location-app-introduction { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .location-app-introduction h2, .location-app-flow h2, .location-app-screens h2 { font-size: 24px; }
  .location-app-introduction > div > p:not(.student-work-detail-section-label) { font-size: 12px; line-height: 1.9; }
  .location-app-facts div { padding: 13px 12px; }
  .location-app-flow { padding: 24px 15px; }
  .location-app-flow ol { margin-top: 23px; }
  .location-app-flow li { padding: 18px 15px; }
  .location-app-flow li:not(:last-child)::after { left: 17px; }
  .location-app-flow li > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .location-app-flow li p { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .location-app-section-heading { grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; }
  .location-app-section-heading > div > p { margin-top: 7px; font-size: 9px; line-height: 1.75; }
  .location-app-image-help { padding: 2px 0 0; }
  .location-app-screen-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 21px; }
}