/* Centered folder overlay, matching the education archive card. */
.archive-overlay {
  --archive-inset: 32px;
  --archive-side: 20px;
  position: fixed;
  top: calc(var(--portfolio-header-height) + var(--portfolio-title-height) + 20px);
  right: 0;
  bottom: 32px;
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 40px minmax(0, 920px) 40px;
  grid-template-rows: minmax(0, 1fr);
  column-gap: 14px;
  justify-content: center;
  align-items: stretch;
  padding: 0 var(--archive-side);
  overflow: hidden;
  background: rgba(253, 253, 252, .42);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.archive-overlay[hidden] { display: none; }
.archive-overlay.is-playing-embed {
  top: calc(var(--portfolio-header-height) + 8px);
  right: 0;
  bottom: 8px;
  left: 0;
  --archive-side: 12px;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  column-gap: 0;
}
.archive-overlay.is-playing-embed .archive-switch {
  visibility: hidden;
  pointer-events: none;
}
.archive-overlay.is-playing-embed .archive-popup-close {
  opacity: 0;
  pointer-events: none;
}
.archive-card {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  max-height: 100%;
  justify-self: stretch;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .16), 0 6px 16px rgba(0, 0, 0, .06);
  animation: archive-popup-in .32s cubic-bezier(.22, 1, .36, 1);
}
.material-studio {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 24px 32px 36px;
  box-sizing: border-box;
}
.material-piece,
.visual-pair {
  margin: 0;
}
.material-piece { display: grid; gap: 12px; justify-items: stretch; }
.material-piece figcaption { display: grid; gap: 2px; text-align: center; justify-items: center; }
.material-piece + .material-piece,
.material-piece + .visual-pair,
.visual-pair + .material-piece {
  padding-top: 28px;
  border-top: 1px solid #e2e8ec;
}
.visual-pair > .material-piece + .material-piece {
  padding-top: 0;
  border-top: 0;
}
@keyframes archive-popup-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.archive-switch {
  flex: none;
  align-self: center;
  grid-row: 1;
  width: 40px;
  height: 40px;
  border: 1px solid #d7dcdf;
  border-radius: 999px;
  background: #fff;
  color: #171b20;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}
.archive-switch:hover { border-color: #0099fd; color: #0099fd; }
.archive-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  margin: 0;
  float: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #686f75;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.archive-popup-close:hover { color: #171b20; background: #f3f4f5; border-color: #e5e5e5; }
.archive-popup-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 22px var(--archive-inset) 10px;
}
.archive-panel-intro { padding: 4px var(--archive-inset) 18px; border-bottom: 1px solid #eceeef; text-align: center; }
.archive-panel-intro h4 { margin: 0 auto 4px; font: 600 20px/1.3 'Poppins', sans-serif; letter-spacing: -.03em; color: #171b20; max-width: 40ch; }
.archive-panel-intro p { margin: 0 auto; max-width: 52ch; font: 400 14px/1.6 'Poppins', sans-serif; color: #66717a; }
.archive-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
}
.archive-study img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; background: #f6f7f8; }
.archive-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #171b20;
  color: #fff;
  border-radius: 999px;
  font: 500 10px/1.4 'Poppins', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.archive-panel { display: none; width: 100%; min-width: 0; }
.archive-overlay[data-active="interactive"] [data-archive-panel="interactive"],
.archive-overlay[data-active="visual"] [data-archive-panel="visual"],
.archive-overlay[data-active="material"] [data-archive-panel="material"] { display: block; }
.archive-study {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  justify-items: stretch;
  cursor: default;
  min-width: 0;
  color: #7a858e;
}
.archive-study span { font: 500 12px/1.4 'Poppins', sans-serif; color: #171b20; }
.archive-study[data-embed] { cursor: pointer; }
.archive-study[data-embed]:hover img,
.archive-study[data-embed]:focus-visible img { outline: 2px solid #0099fd; outline-offset: 3px; }
.archive-card.is-embedding { overflow: hidden; }
.archive-embed {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  border-radius: 12px;
}
.archive-embed[hidden] { display: none; }
.archive-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px 6px 16px;
  border-bottom: 1px solid #eceeef;
  flex: none;
}
.archive-embed-bar strong {
  font: 500 14px/1.3 'Poppins', sans-serif;
  letter-spacing: -.02em;
  color: #171b20;
}
.archive-embed-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font: 400 26px/1 'Poppins', sans-serif;
  color: #171b20;
  cursor: pointer;
}
.archive-embed-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #1a1a1a;
}
.archive-embed-scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  will-change: transform;
}
.archive-embed-scaler iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.material-kind {
  font: 500 10px/1.4 'Poppins', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0099fd;
}
.material-studio strong {
  font: 500 16px/1.35 'Poppins', sans-serif;
  letter-spacing: -.02em;
  color: #171b20;
}
.material-studio em {
  font: italic 400 13px/1.5 'Poppins', sans-serif;
  color: #6a737b;
}
.material-stage {
  position: relative;
  overflow: hidden;
  background: #f4f5f6;
  aspect-ratio: 16 / 9;
  cursor: ew-resize;
  touch-action: none;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.material-stage video,
.material-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-stage img {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.material-stage.is-playing img { opacity: 0; }
.book-scrub {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 2px;
  background: rgba(255,255,255,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.material-stage.is-playing .book-scrub { opacity: 1; }
.book-scrub i {
  display: block;
  width: 100%;
  height: 100%;
  background: #0099fd;
  transform: scaleX(0);
  transform-origin: left center;
}
.material-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #f4f5f6;
}
.material-photo--hat { max-width: 260px; justify-self: center; }
.material-crochet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}
.material-swap {
  position: relative;
  overflow: hidden;
  background: #f6f7f8;
  aspect-ratio: 3 / 4;
}
.material-swap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.material-swap-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  object-fit: cover;
  transition: opacity 220ms ease;
}
.material-swap:hover .material-swap-hover { opacity: 1; }
.sketch-stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eef0f2;
  border: 1px solid #eceeef;
}
.sketch-mount {
  position: absolute;
  inset: 0;
}
.sketch-mount canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.sketch-play,
.sketch-stop {
  border: 1px solid #171b20;
  border-radius: 999px;
  background: #fff;
  font: 500 11px/1 'Poppins', sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.sketch-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.42);
  font: 500 13px/1 'Poppins', sans-serif;
  color: #171b20;
}
.sketch-play:hover { background: rgba(255,255,255,.55); }
.sketch-stop {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: none;
  padding: 7px 12px;
}
.sketch-stage.is-playing .sketch-play { display: none; }
.sketch-stage.is-playing .sketch-stop { display: inline-flex; }
.sketch-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  text-align: center;
  font: 500 11px/1.4 'Poppins', sans-serif;
  color: #5c656c;
  pointer-events: none;
}
.sketch-stage.is-playing .sketch-hint { display: none; }
.sketch-stage--story {
  width: min(520px, 100%, 58vh);
  max-width: 640px;
  margin-inline: auto;
}
.sketch-stage--story.is-playing { cursor: none; }
.material-studio .archive-study-grid { padding: 0; }
.visual-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.visual-poster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}
.visual-poster {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f6f7f8;
  cursor: zoom-in;
  min-width: 0;
}
.visual-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #f6f7f8;
}
.visual-poster--logo {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.zine-viewer {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 0;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  box-sizing: border-box;
  background: transparent;
  border: 0;
}
.zine-book {
  position: relative;
  padding: 22px 18px 26px;
  background: linear-gradient(180deg, #eceef1 0%, #e4e7ea 100%);
  border: 1px solid #e2e5e8;
  perspective: 1600px;
}
.zine-hotspot {
  position: absolute;
  top: 22px;
  bottom: 26px;
  z-index: 2;
  width: 28%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.zine-hotspot--prev { left: 18px; cursor: w-resize; }
.zine-hotspot--next { right: 18px; cursor: e-resize; }
.zine-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  transform-origin: center center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 14px 28px rgba(23, 27, 32, .18));
}
.zine-spread.is-cover { grid-template-columns: minmax(0, 42%); }
.zine-viewer--folio .zine-spread.is-cover { grid-template-columns: minmax(0, 220px); }
.zine-viewer--folio .zine-spread.is-spread { grid-template-columns: minmax(0, 1fr); }
.zine-spread.is-turn-next { animation: zine-flip-next .48s cubic-bezier(.22, 1, .36, 1); }
.zine-spread.is-turn-prev { animation: zine-flip-prev .48s cubic-bezier(.22, 1, .36, 1); }
@keyframes zine-flip-next {
  from { transform: rotateY(-16deg) translateX(10px); opacity: .58; }
  to { transform: none; opacity: 1; }
}
@keyframes zine-flip-prev {
  from { transform: rotateY(16deg) translateX(-10px); opacity: .58; }
  to { transform: none; opacity: 1; }
}
.zine-spread img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}
.zine-viewer--folio .zine-spread.is-spread img { max-height: 300px; }
.zine-spread.is-cover img {
  box-shadow: 4px 0 0 #d7dbe0, 8px 0 0 #eceeef, 0 10px 24px rgba(0,0,0,.12);
}
.exhibit-board {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, .75fr);
  gap: 16px;
  align-items: stretch;
}
.exhibit-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.exhibit-photo--hero { grid-column: 1 / -1; }
.exhibit-photo img { aspect-ratio: 4 / 5; object-fit: cover; background: #f4f5f6; }
.exhibit-photo--hero img { aspect-ratio: 4 / 3; }
.exhibit-booklet {
  margin: 0;
  max-width: none;
  align-content: start;
}
.exhibit-booklet .pdf-page { max-height: 260px; }
.pdf-viewer {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  box-sizing: border-box;
  background: #f6f7f8;
  border: 1px solid #eceeef;
}
.pdf-zoom-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid #171b20;
  border-radius: 999px;
  background: #fff;
  font: 500 11px/1 'Poppins', sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.pdf-zoom-btn:hover { background: #171b20; color: #fff; }
.pdf-page {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  background: #fff;
  cursor: zoom-in;
}
.pdf-viewer--wide .pdf-page { max-height: 380px; }
.pdf-pager[hidden] { display: none; }
.pdf-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 500 12px/1 'Poppins', sans-serif;
  color: #5c656c;
}
.pdf-pager button {
  width: 28px;
  height: 28px;
  border: 1px solid #d7dcdf;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.pdf-pager button:hover { border-color: #0099fd; color: #0099fd; }
.pdf-lightbox {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 8;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: rgba(17, 19, 22, .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.pdf-lightbox[hidden] { display: none; }
.pdf-lightbox-stage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  column-gap: 16px;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 48px 24px 24px;
}
.pdf-lightbox figure {
  grid-column: 2;
  margin: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
}
.pdf-lightbox img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.pdf-lightbox-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  min-height: 0;
}
.pdf-lightbox.is-spread .pdf-lightbox-pages img {
  max-width: 48%;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.pdf-lightbox figcaption {
  color: #d7dce0;
  font: 500 13px/1 'Poppins', sans-serif;
}
.pdf-lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font-size: 22px;
  cursor: pointer;
}
.pdf-lightbox-nav {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
#pdfLightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}
#pdfLightbox .pdf-lightbox-stage {
  box-sizing: border-box;
  width: min(1280px, 100%);
  height: 100%;
  margin: auto;
  padding: 64px 24px 24px;
  grid-template-rows: minmax(0, 1fr);
}
#pdfLightbox figure {
  width: 100%;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr) 20px;
  align-content: stretch;
}
#pdfLightbox img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
#pdfLightbox.is-spread img { max-width: 48%; height: auto; }
#pdfLightbox [data-pdf-lightbox-prev] { grid-column: 1; grid-row: 1; }
#pdfLightbox [data-pdf-lightbox-next] { grid-column: 3; grid-row: 1; }
#pdfLightbox .pdf-lightbox-nav[hidden] { display: none; }
.archive-overlay button:focus-visible { outline: 2px solid #0099fd; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .archive-card { animation: none; }
  .material-stage video, .book-scrub { display: none; }
  .material-stage img { opacity: 1; position: static; }
  .material-stage { cursor: default; }
  .zine-spread.is-turn-next,
  .zine-spread.is-turn-prev { animation: none; }
}
@media (max-width: 700px) {
  .archive-overlay {
    top: calc(var(--portfolio-header-height) + var(--portfolio-title-height) + 12px);
    bottom: 16px;
    --archive-side: 8px;
    --archive-inset: 16px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    column-gap: 6px;
  }
  .archive-overlay.is-playing-embed {
    top: calc(var(--portfolio-header-height) + 6px);
    bottom: 6px;
    --archive-side: 6px;
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
  .archive-embed-bar { min-height: 36px; padding: 2px 6px 2px 12px; }
  .archive-embed-bar strong { font-size: 12px; }
  .archive-switch { width: 28px; height: 32px; font-size: 22px; }
  .material-studio { padding: 20px 16px 28px; }
  .archive-study-grid { grid-template-columns: 1fr; }
  .material-crochet { grid-template-columns: 1fr; max-width: 280px; }
  .material-pair { grid-template-columns: 1fr; }
  .visual-pair, .visual-poster-grid { grid-template-columns: 1fr; }
  .visual-pair > .material-piece + .material-piece {
    padding-top: 28px;
    border-top: 1px solid #e2e8ec;
  }
  .zine-spread.is-cover,
  .zine-viewer--folio .zine-spread.is-cover { grid-template-columns: minmax(0, 70%); }
  .exhibit-board { grid-template-columns: 1fr; }
  #pdfLightbox .pdf-lightbox-stage { padding: 64px 8px 16px; grid-template-columns: 30px minmax(0, 1fr) 30px; column-gap: 6px; }
  #pdfLightbox .pdf-lightbox-nav { width: 30px; height: 34px; font-size: 23px; }
}
@media (max-height: 760px) {
  .archive-overlay.is-playing-embed {
    top: calc(var(--portfolio-header-height) + 6px);
    bottom: 6px;
  }
  .archive-embed-bar { min-height: 36px; padding: 2px 8px 2px 14px; }
}

/* Top-layer sidecar never adds a pixel to the story's scroll length. */

body.design-combined .formation { --formation-top: calc(var(--portfolio-header-height) + 88px); padding-bottom: 70px; }
.formation-header {
  position: relative;
  top: auto;
  z-index: 1;
  background: transparent;
  padding: 8px 0 0;
  margin-bottom: 28px;
}
.formation-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 36px;
  background: linear-gradient(#fff, rgba(255,255,255,0));
  pointer-events: none;
}
body.design-combined .formation-header .about-section-title { margin-bottom: 0; }
.formation-header > p { color: #858b90; font: 12px/1.65 'Poppins',sans-serif; max-width: 46ch; margin: 0; }
.formation-workspace,
.formation-panels { display: block; min-width: 0; }
.formation-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 36px;
  margin-bottom: 110px;
}
.formation-panel:last-child { margin-bottom: 0; }
.formation-copy { min-width: 0; }
.formation-copy h3 { font:500 clamp(22px,2vw,30px)/1.3 'Poppins',sans-serif; letter-spacing:-.035em; margin:18px 0 24px; max-width:36ch; color:#171b20; }
.formation-copy > p { font:15px/1.85 'Poppins',sans-serif; max-width:48ch; color:#5a6066; margin:0 0 22px; }
.formation .formation-aside { font-size:12px!important; color:#999ea3!important; line-height:1.75; }
.formation-archive-item[hidden] { display:none; }
body.design-combined .formation-panel #designArchive {
  width: 100%;
  margin: 8px 0 0;
}
@media (max-width:700px) {
  .formation-panel { gap: 28px; margin-bottom: 72px; }
  .formation-copy > p { max-width: 45ch; }
  .formation-header { margin-bottom: 20px; }
}

.penn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 200px);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.penn-layout > :not(.penn-margin) { grid-column: 1; }
.penn-margin {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  min-height: 1px;
  --penn-anchor: 0px;
}
.penn-essay h3 { margin: 18px 0 42px; }
.penn-essay .penn-layout > p.penn-chunk {
  max-width: 58ch;
  margin: 0 0 46px;
  font-size: 16px;
  line-height: 1.85;
  color: #454b51;
}
.penn-essay .penn-layout > p.penn-chunk--close { margin-bottom: 0; }
.penn-essay .penn-chunk--close em {
  font-style: italic;
  font-weight: 500;
  color: #2a3036;
}
.penn-mark {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  position: relative;
  border-radius: 0;
  box-shadow: inset 0 -0.32em 0 #0099fd14;
  transition: box-shadow .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.penn-mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: 1px;
  background: #8ecbf0;
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s ease, opacity .28s ease;
  pointer-events: none;
}
.penn-mark:hover,
.penn-mark:focus-visible,
.penn-mark.is-open {
  box-shadow: inset 0 -0.42em 0 #0099fd28;
}
.penn-mark:hover::after,
.penn-mark:focus-visible::after,
.penn-mark.is-open::after {
  transform: scaleX(1);
  opacity: .9;
}
.penn-mark:focus-visible { outline: 2px solid #0099fd; outline-offset: 3px; }
.penn-margin-idle {
  position: absolute;
  top: var(--penn-anchor);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 10px/1 monospace;
  letter-spacing: .12em;
  color: #d2d8dc;
  transition: opacity .28s ease;
  pointer-events: none;
}
.penn-margin.is-open .penn-margin-idle { opacity: 0; }
.penn-notes { position: relative; min-height: 1px; }
.penn-note {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--penn-anchor);
  opacity: 0;
  visibility: hidden;
  transform: translate(10px, 6px);
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
  pointer-events: none;
}
.penn-note.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .32s ease, transform .32s ease, visibility 0s;
  pointer-events: auto;
}
.penn-note-inner {
  padding-left: 12px;
  border-left: 1px solid #0099fd3d;
}
.penn-note-index {
  margin: 0 0 8px;
  font: 10px/1 monospace;
  letter-spacing: .12em;
  color: #8aa0ad;
}
.penn-note h4 {
  margin: 0 0 10px;
  font: 500 11px/1.4 'Poppins', sans-serif;
  letter-spacing: .08em;
  color: #1d2a32;
}
.penn-note-inner > p:last-child {
  margin: 0;
  font: 12px/1.7 'Poppins', sans-serif;
  color: #6a737b;
  max-width: 28ch;
}
@media (max-width: 860px) {
  .penn-layout {
    display: flex;
    flex-direction: column;
  }
  .penn-margin {
    min-height: 0;
    margin: 0;
  }
  .penn-margin-idle { display: none; }
  .penn-notes { position: static; }
  .penn-note {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: none;
    transition: grid-template-rows .32s ease, margin .32s ease;
  }
  .penn-note .penn-note-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .28s ease, transform .28s ease;
  }
  .penn-note.is-open {
    grid-template-rows: 1fr;
    margin: 4px 0 32px;
    pointer-events: auto;
  }
  .penn-note.is-open .penn-note-inner {
    opacity: 1;
    transform: none;
    padding: 4px 0 2px 12px;
  }
  .penn-essay .penn-layout > p.penn-chunk { margin-bottom: 36px; }
  .penn-essay .penn-layout > p.penn-chunk--close { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .penn-mark,
  .penn-mark::after,
  .penn-note,
  .penn-note-inner,
  .penn-margin-idle { transition: none; }
}

/* Keep archive scrolling inside the tray and avoid width shifts on scroll lock. */
html:has(body.design-combined) { scrollbar-gutter:stable; }
#designArchivePopup .archive-card { overscroll-behavior:contain; }