/* Student Canvas family — October 22, 2026.
   Loaded by the existing hub, publication, and works CSS callers.
   Presentation only: all authored media, content and listing hooks stay intact. */
@import url("../components/unique-family.css");

/* Family geometry and type. No global tokens or component skins are replaced. */
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) {
  --sc-width: var(--container-lg, 1200px);
  --sc-gutter: clamp(1.25rem, 3vw, 2rem);
  --sc-space: clamp(2.75rem, 5vw, 4.5rem);
  --sc-soft: #f3f1ed;
  color: var(--color-text);
  background: var(--color-white);
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) .student-canvas-shell {
  width: min(calc(100% - 2 * var(--sc-gutter)), var(--sc-width));
  min-width: 0;
  margin-inline: auto;
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) :is(h1, h2, h3, p, a) {
  overflow-wrap: anywhere;
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) .student-canvas-kicker {
  color: var(--color-accent);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .12em;
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) :where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Hero primitives shared only by Canvas and publication pages. */
:is(.student-canvas, .student-publication) .student-canvas-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
  border-block-end: .1875rem solid var(--color-gold);
  background: var(--color-primary-dark);
  color: var(--color-white);
}
:is(.student-canvas, .student-publication) .student-canvas-hero__content {
  order: 1;
  min-width: 0;
  padding: clamp(3rem, 5vw, 5rem) var(--sc-gutter);
  color: inherit;
}
:is(.student-canvas, .student-publication) .student-canvas-hero__content .student-canvas-shell {
  width: 100%;
  max-width: var(--sc-width);
}
:is(.student-canvas, .student-publication) .student-canvas-hero__content h1,
:is(.student-canvas, .student-publication) .student-canvas-page-header h1 {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: clamp(2.125rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  white-space: normal;
  text-wrap: balance;
}
:is(.student-canvas, .student-publication) .student-canvas-hero__eyebrow {
  margin: 0 0 .875rem;
  color: var(--color-gold);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .12em;
}
:is(.student-canvas, .student-publication) .student-canvas-hero__intro {
  max-width: 58ch;
  margin-block-start: 1.25rem;
  color: inherit;
  font-size: 1.0625rem;
  line-height: 1.7;
}
:is(.student-canvas, .student-publication) .student-canvas-hero__content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}
:is(.student-canvas, .student-publication) .student-canvas-hero :where(a, button):focus-visible {
  outline-color: var(--color-gold);
}
:is(.student-canvas, .student-publication) .student-canvas-hero__media {
  order: 2;
  min-width: 0;
  max-height: none;
  overflow: hidden;
  background: var(--color-primary-dark);
}
:is(.student-canvas, .student-publication) .student-canvas-hero__media img,
:is(.student-canvas, .student-publication) .student-canvas-hero__media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border: 0;
  object-fit: cover;
}
/* Default: panoramic media beneath the editorial text. */
:is(.student-canvas, .student-publication) .student-canvas-hero--default .student-canvas-hero__media img,
:is(.student-canvas, .student-publication) .student-canvas-hero--default .student-canvas-hero__media video:not([controls]) {
  height: clamp(18rem, 32vw, 30rem);
}
/* Side options: matching silhouettes, with bounded copy gutters at desktop. */
:is(.student-canvas, .student-publication) :is(.student-canvas-hero--image_left, .student-canvas-hero--image_right) .student-canvas-hero__media {
  border-start-start-radius: 35% 3rem;
}
@media (min-width: 60rem) {
  :is(.student-canvas, .student-publication) .student-canvas-hero--image_left:has(.student-canvas-hero__media) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  :is(.student-canvas, .student-publication) .student-canvas-hero--image_right:has(.student-canvas-hero__media) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  :is(.student-canvas, .student-publication) :is(.student-canvas-hero--image_left, .student-canvas-hero--image_right):has(.student-canvas-hero__media) .student-canvas-hero__content {
    align-self: center;
    padding-inline: clamp(1.5rem, 3vw, 3rem);
  }
  :is(.student-canvas, .student-publication) .student-canvas-hero--image_left:has(.student-canvas-hero__media) .student-canvas-hero__content {
    order: 2;
  }
  :is(.student-canvas, .student-publication) .student-canvas-hero--image_left:has(.student-canvas-hero__media) .student-canvas-hero__media {
    order: 1;
    border-radius: 0 0 24% 0 / 0 0 100% 0;
  }
  :is(.student-canvas, .student-publication) .student-canvas-hero--image_right:has(.student-canvas-hero__media) .student-canvas-hero__media {
    order: 2;
    border-radius: 0 0 0 24% / 0 0 0 100%;
  }
  :is(.student-canvas, .student-publication) :is(.student-canvas-hero--image_left, .student-canvas-hero--image_right) .student-canvas-hero__media img,
  :is(.student-canvas, .student-publication) :is(.student-canvas-hero--image_left, .student-canvas-hero--image_right) .student-canvas-hero__media video:not([controls]) {
    height: 100%;
    min-height: 25rem;
  }
}
/* Native controls retain square edges and the video's complete frame. */
:is(.student-canvas, .student-publication) .student-canvas-hero__media:has(video[controls]) {
  align-self: center;
  border-radius: 0;
}
:is(.student-canvas, .student-publication) .student-canvas-hero__media video[controls] {
  height: auto;
  object-fit: contain;
}
/* Minimal: the selected media remains visible if the page supplies it. */
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal {
  min-height: 20rem;
  background: var(--sc-soft);
  color: var(--color-primary-dark);
  border-block-end: 1px solid var(--color-border);
}
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal .student-canvas-hero__content {
  align-self: center;
  padding-block: clamp(4rem, 7vw, 6rem);
  text-align: center;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal .student-canvas-hero__eyebrow {
  color: var(--color-accent);
}
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal .student-canvas-hero__intro {
  margin-inline: auto;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal .student-canvas-hero__media {
  width: min(calc(100% - 2 * var(--sc-gutter)), 48rem);
  margin: 0 auto 2rem;
  border-radius: .375rem;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--minimal :where(a, button):focus-visible {
  outline-color: var(--color-accent);
}
/* Full bleed: media fills the entire content-driven hero. */
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed:has(.student-canvas-hero__media) {
  min-height: 28rem;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed:has(.student-canvas-hero__media)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 31, 59, .7);
  pointer-events: none;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed .student-canvas-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  border-radius: 0;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed .student-canvas-hero__media img,
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed .student-canvas-hero__media video {
  height: 100%;
  object-fit: cover;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed .student-canvas-hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-block-end: 5rem;
  pointer-events: none;
}
:is(.student-canvas, .student-publication) .student-canvas-hero--full_bleed .student-canvas-hero__content :is(a, button, h1, p) {
  pointer-events: auto;
}
:is(.student-canvas, .student-publication) .student-canvas-page-header {
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: var(--sc-soft);
  color: var(--color-primary-dark);
  border-block-end: 1px solid var(--color-border);
}
:is(.student-canvas, .student-publication) .student-canvas-page-header .student-canvas-hero__eyebrow {
  color: var(--color-accent);
}

/* Hub sections and page-owned cards. */
.student-canvas :is(.student-canvas__intro, .student-canvas__destinations, .student-canvas__featured, .student-canvas__latest, .student-canvas__involved) {
  padding-block: var(--sc-space);
}
.student-canvas :is(.student-canvas__intro, .student-canvas__featured, .student-canvas__latest) {
  background: var(--color-white);
}
.student-canvas .student-canvas__destinations {
  background: var(--sc-soft);
}
.student-canvas :is(.student-canvas__intro, .student-canvas__involved) .content-prose {
  max-width: 76ch;
  margin-inline: auto;
}
.student-canvas :is(.student-canvas__intro, .student-canvas__destinations, .student-canvas__featured, .student-canvas__latest, .student-canvas__involved) h2 {
  margin-block-end: 1.5rem;
  color: var(--color-primary-dark);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.student-canvas :is(.student-canvas-destination-grid, .student-canvas-featured-grid, .student-canvas-latest-grid) {
  gap: 1.5rem;
}
.student-canvas :is(.student-canvas-destination, .student-canvas-featured-work) {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: .375rem;
  background: var(--color-white);
  box-shadow: none;
}
.student-canvas .student-canvas-destination {
  display: flex;
  flex-direction: column;
}
.student-canvas :is(.student-canvas-destination__media, .student-canvas-featured-work__media) {
  display: block;
  background: var(--sc-soft);
}
.student-canvas .student-canvas-destination__content {
  flex: 1;
  padding: 1.5rem;
}
.student-canvas .student-canvas-featured-work > div {
  padding: 1.25rem 1.5rem;
}
.student-canvas :is(.student-canvas-destination__content, .student-canvas-featured-work) h3 {
  color: var(--color-primary-dark);
  font-size: 1.375rem;
  line-height: 1.35;
}
.student-canvas :is(.student-canvas-destination__content, .student-canvas-featured-work) h3 a {
  color: inherit;
  text-decoration: none;
}
.student-canvas :is(.student-canvas-destination__link, .student-canvas-destination__content h3 a:hover, .student-canvas-featured-work h3 a:hover) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.student-canvas .student-canvas-featured-work__media img {
  object-fit: contain;
}
.student-canvas .student-canvas__involved {
  border-block-start: .1875rem solid var(--color-gold);
  background: var(--sc-soft);
}
.student-canvas .student-canvas__involved .button-row__button {
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: none;
}
.student-canvas .student-canvas__involved .button-row__button:hover,
.student-canvas .student-canvas__involved .button-row__button:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* Publication component skin limited to this family, including hub features. */
:is(.student-canvas, .student-publication) :is(.publication-current, .publication-card, .publication-collection__tools) {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: .375rem;
  background: var(--color-white);
  box-shadow: none;
}
:is(.student-canvas, .student-publication) .publication-current {
  border-block-start: .1875rem solid var(--color-gold);
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
:is(.student-canvas, .student-publication) .publication-current:not(:has(> .publication-current__media)),
:is(.student-canvas, .student-publication) .publication-card--compact:not(:has(> .publication-card__media)) {
  grid-template-columns: minmax(0, 1fr);
}
:is(.student-canvas, .student-publication) :is(.publication-current__media, .publication-card__media) {
  background: var(--sc-soft);
}
:is(.student-canvas, .student-publication) :is(.publication-current__media img, .publication-card__media img) {
  object-fit: contain;
  border-radius: 0;
}
:is(.student-canvas, .student-publication) :is(.publication-current__content, .publication-card__content) {
  min-width: 0;
}
:is(.student-canvas, .student-publication) :is(.publication-current__content h3, .publication-card__title) {
  color: var(--color-primary-dark);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.3;
}
:is(.student-canvas, .student-publication) :is(.publication-current__eyebrow, .publication-card__group) {
  color: var(--color-accent);
  font-size: .75rem;
  letter-spacing: .1em;
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) .publication-button {
  min-height: 2.75rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) .publication-button:hover,
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) .publication-button:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}
:is(.student-canvas, .student-publication) :is(.publication-link, .publication-card__action a) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.student-canvas .publication-current {
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
}
@media (max-width: 42rem) {
  .student-canvas .publication-current {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Preserve native/JS hidden states even when Foundation gives cards a layout. */
:is(.student-canvas, .student-publication, .student-works-listing, .student-work-detail) [hidden] {
  display: none;
}

/* Student Canvas Hub: an editorial canvas, isolated from publication heroes. */
.student-canvas .sc-hub-banner {
  --sc-banner-ink: var(--color-primary-dark, #07375b);
  --sc-banner-gold: var(--color-gold, #ffd34f);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: clamp(34rem, 62vw, 46rem);
  margin: 0;
  overflow: hidden;
  background: var(--sc-banner-ink);
  color: #fff;
}
.student-canvas .sc-hub-banner::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .84), rgb(0 0 0 / .66) 52%, rgb(0 0 0 / .1));
}
.student-canvas .sc-hub-banner__media,
.student-canvas .sc-hub-banner__art { position: absolute; inset: 0; pointer-events: none; }
.student-canvas .sc-hub-banner__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.student-canvas .sc-hub-banner__art {
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 85% 25%, transparent 0 25%, rgb(255 255 255 / .1) 25.1% 25.3%, transparent 25.4%), linear-gradient(125deg, transparent 54%, color-mix(in srgb, var(--color-primary, #006ba6) 85%, transparent) 54% 75%, transparent 75%);
}
.student-canvas .sc-hub-banner__orbit { position: absolute; inline-size: 34rem; block-size: 34rem; inset-inline-end: -13rem; inset-block-start: -12rem; border: 4rem solid var(--sc-banner-gold); border-radius: 50%; opacity: .9; }
.student-canvas .sc-hub-banner__sheet { position: absolute; inline-size: 36%; block-size: 90%; inset-inline-end: -10%; inset-block-end: -38%; background: var(--color-accent, #8c1d40); transform: rotate(-23deg); border-block-start: .5rem solid var(--sc-banner-gold); }
.student-canvas .sc-hub-banner__word { position: absolute; inset-inline-end: -.04em; inset-block-end: .45em; color: rgb(255 255 255 / .1); font-size: clamp(6rem, 21vw, 22rem); font-weight: 900; letter-spacing: -.075em; line-height: 1; transform: rotate(-9deg); }
.student-canvas .sc-hub-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 8rem) 7rem;
}
.student-canvas .sc-hub-banner__copy { inline-size: min(100%, 44rem); min-inline-size: 0; }
.student-canvas .sc-hub-banner__eyebrow { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.5rem; color: var(--sc-banner-gold); font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.student-canvas .sc-hub-banner__eyebrow::before { content: ""; inline-size: 2.5rem; block-size: .2rem; flex: 0 0 auto; background: currentColor; }
.student-canvas .sc-hub-banner h1 { margin: 0; color: #fff; font-size: clamp(3.3rem, 8.7vw, 7.5rem); line-height: .98; letter-spacing: -.055em; font-weight: 850; text-wrap: balance; overflow-wrap: anywhere; }
.student-canvas .sc-hub-banner__intro { max-inline-size: 48ch; margin-block-start: 1.75rem; color: #fff; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; }
.student-canvas .sc-hub-banner__intro :is(p, li, strong, em, h2, h3) { color: inherit; }
.student-canvas .sc-hub-banner__intro > :first-child { margin-block-start: 0; }
.student-canvas .sc-hub-banner__intro > :last-child { margin-block-end: 0; }
.student-canvas .sc-hub-banner__intro a { color: #fff; text-decoration: underline; }
.student-canvas .sc-hub-banner__button { display: inline-flex; align-items: center; gap: 1.5rem; max-inline-size: 100%; margin-block-start: 2rem; padding: 1rem 1.5rem; border: 2px solid var(--sc-banner-gold); border-radius: 999px; background: var(--sc-banner-gold); color: #101820; text-decoration: none; font-weight: 750; line-height: 1.3; }
.student-canvas .sc-hub-banner__button:hover { background: #fff; border-color: #fff; color: #101820; }
.student-canvas .sc-hub-banner :is(a, button):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.student-canvas .sc-hub-banner__caption { margin-block-start: 1.5rem; color: #fff; font-size: .85rem; }
.student-canvas .sc-hub-banner__ribbon { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding: 1rem max(var(--sc-gutter, 1.25rem), calc((100% - var(--sc-width, 1200px)) / 2)); background: var(--sc-banner-gold); color: #101820; font-size: clamp(.9rem, 1.8vw, 1.2rem); font-weight: 800; letter-spacing: -.02em; }
.student-canvas .sc-hub-banner__ribbon-mark { margin-inline-start: auto; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 42rem) {
  .student-canvas .sc-hub-banner { min-block-size: 0; }
  .student-canvas .sc-hub-banner__inner { padding-block: 4rem; }
  .student-canvas .sc-hub-banner::before { background: rgb(0 0 0 / .76); }
  .student-canvas .sc-hub-banner__orbit { opacity: .35; }
  .student-canvas .sc-hub-banner__ribbon { gap: .5rem 1rem; }
  .student-canvas .sc-hub-banner__ribbon-mark { flex-basis: 100%; margin: .25rem 0 0; }
}
@media (forced-colors: active) {
  .student-canvas .sc-hub-banner__art { display: none; }
  .student-canvas .sc-hub-banner__button { border-color: ButtonText; }
}