/* The one loading animation (parts/ui/show/loading-mark): a needle stitches the look's accent thread across the space,
   pulls it through and starts again. It waits ~300 ms before showing so a fast answer never flashes, and holds still
   for reduced motion. Also the moving highlight over the screen-state loading rows (21st.dev Skeleton Loader, 19999). */
.loading-mark {display:inline-flex;align-items:center;justify-content:center;flex:none;animation:loading-mark-appear .24s ease-out .3s both;line-height:0}
.loading-mark[data-loading-mark=sm] {width:30px;height:12px}
.loading-mark[data-loading-mark=md] {width:48px;height:18px}
.loading-mark[data-loading-mark=lg] {width:96px;height:36px}
.loading-mark-art {width:100%;height:100%;overflow:visible}
.loading-mark-guide {stroke:currentColor;stroke-opacity:.12;stroke-width:1;stroke-dasharray:2.4 2.6;stroke-linecap:round}
.loading-mark-thread {stroke:var(--thread-line,var(--accent-primary,#ff1d1d));stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:loading-mark-thread 1.9s cubic-bezier(.55,0,.35,1) .3s infinite}
.loading-mark-needle {offset-rotate:auto;offset-distance:0%;animation:loading-mark-needle 1.9s cubic-bezier(.55,0,.35,1) .3s infinite}
.loading-mark-needle-body {fill:currentColor}
.loading-mark-needle-eye {fill:var(--glass-bg-primary,#fffdf8)}
[data-loading-mark=sm] .loading-mark-thread {stroke-width:2.4}
[data-loading-mark=sm] .loading-mark-guide {display:none}
/* Inside a pressed button the thread takes the button's own text colour, so it reads on a red or an ink fill. */
:is(button,[role=button],a) .loading-mark-thread {stroke:currentColor}
:is(button,[role=button],a) .loading-mark-needle-eye {fill:transparent}
@keyframes loading-mark-appear {from {opacity:0;transform:translateY(2px)}}
@keyframes loading-mark-thread {0% {stroke-dashoffset:100} 62% {stroke-dashoffset:0} 100% {stroke-dashoffset:-100}}
@keyframes loading-mark-needle {0% {offset-distance:0%;opacity:0} 8% {opacity:1} 62% {offset-distance:100%;opacity:1} 80%,100% {offset-distance:100%;opacity:0}}
/* The screen-state loading rows: the mark over them, the whole block waiting ~300 ms, a highlight crossing each bar. */
.shared-media-loading[data-screen-state=loading] {animation:loading-mark-appear .24s ease-out .3s both}
.screen-state-loading-mark {grid-column:1/-1;display:flex;justify-content:center;padding:28px 0 20px}
.shared-media-loading[data-screen-state=loading] [data-slot=skeleton] {background:linear-gradient(100deg,var(--glass-bg-secondary,rgba(25,25,25,.05)) 30%,color-mix(in srgb,var(--thread-line,var(--accent-primary,#ff1d1d)) 6%,var(--glass-bg-secondary,rgba(25,25,25,.05))) 50%,var(--glass-bg-secondary,rgba(25,25,25,.05)) 70%);background-size:300% 100%;animation:loading-mark-shimmer 1.9s ease-in-out infinite}
@keyframes loading-mark-shimmer {from {background-position:100% 0} to {background-position:0 0}}
@media(prefers-reduced-motion:reduce){
  .loading-mark,.shared-media-loading[data-screen-state=loading] {animation-duration:.01s}
  .loading-mark-thread {animation:none;stroke-dashoffset:0}
  .loading-mark-needle {animation:none;offset-distance:100%;opacity:1}
  .shared-media-loading[data-screen-state=loading] [data-slot=skeleton] {animation:none}
}

/* One look for a public link carrying any mix of things. The page supplies section
   data; the shared page renderer supplies the elements and the media player. */
.page-layout.page-layout--share {
  box-sizing: border-box;
  max-width: 72rem;
  min-height: 100dvh;
  padding-inline: clamp(1rem, 4vw, 3.5rem);
}

.page-layout--share .page-main {
  display: flex;
  min-height: 100dvh;
  min-width: 0;
  flex-direction: column;
}

.page-layout--share .page-main > .page-section {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}

/* Public links wear the selected Screen Look's display face, including when the
   server-rendered page shell uses its legacy ink theme for colour. */
.page-layout.page-layout--share .page-heading,
.page-layout.page-layout--share .page-card-heading {
  font-family: var(--page-display);
}

.page-layout--share .page-section--share-brand {
  display: flex;
  min-height: 5rem;
  align-items: center;
  gap: .8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--page-line);
}

.page-layout--share .page-section--share-brand .page-mark {
  width: 2.3rem;
  height: 2.3rem;
  margin: 0;
  border-radius: .55rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.page-layout--share .page-section--share-brand .page-eyebrow {
  margin: 0;
  color: var(--page-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

.page-layout--share .page-section--share-heading {
  padding: clamp(2.5rem, 6vw, 5rem) 0 2rem;
}

.page-layout--share .page-section--share-featured {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.page-layout--share .page-section--share-heading .page-eyebrow,
.page-layout--share .page-section--share-featured .page-eyebrow {
  margin-bottom: .75rem;
  color: var(--page-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.page-layout--share .page-section--share-heading .page-heading,
.page-layout--share .page-section--share-featured .page-heading {
  max-width: 21ch;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.page-layout--share .page-section--share-featured .page-body,
.page-layout--share .page-section--share-entry .page-body {
  max-width: 70ch;
  margin-top: 1rem;
  overflow-wrap: anywhere;
}

.page-layout--share .page-section--share-entry {
  padding: 2.25rem 0 2.75rem;
  border-top: 1px solid var(--page-line);
}

.page-layout--share .page-section--share-entry .page-heading {
  margin: 0;
  font-size: clamp(1.4rem, 2.7vw, 2rem);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.page-layout--share .page-section--share-entry .page-items {
  margin-top: 1.4rem;
}

.page-layout--share .page-section--share-featured .page-media,
.page-layout--share .page-section--share-entry .page-media {
  width: 100%;
  max-height: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-radius: 1.15rem;
}

.page-layout--share .page-media-player {
  position: relative;
  min-height: min(32vw, 24rem);
  background: #111;
  box-shadow: 0 24px 70px -38px rgba(0, 0, 0, .6);
}

.page-layout--share .page-media-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.page-layout--share .page-media-mount {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-layout--share .page-media-player:has(.page-media-poster) [data-media-playback-browser-source],
.page-layout--share .page-media-player:has(.page-media-poster) video {
  background: transparent !important;
}

.page-layout--share .page-media-player:has([data-media-playback-browser-source]) {
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.page-layout--share .page-media-player > [data-media-playback-surface],
.page-layout--share .page-media-player [data-media-playback-browser-source] {
  width: 100%;
}

.page-layout.page-layout--share .page-media-player [data-media-fullscreen-transcript] p button {
  color: rgba(255, 255, 255, .88);
}

.page-layout.page-layout--share .page-media-player [data-media-fullscreen-transcript] p button[data-fullscreen-transcript-word-active="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

.page-layout.page-layout--share .page-media-player [data-media-caption-reader] [data-caption-control] [role="toolbar"] {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(15, 15, 15, .85);
}

.page-layout.page-layout--share .page-media-player [data-media-caption-reader] [data-caption-control] button {
  color: rgba(255, 255, 255, .82);
}

.page-layout.page-layout--share .page-media-player [data-media-caption-reader] [data-caption-control] button:is(:hover, :focus-visible, [data-expanded], [data-pinned]) {
  color: #fff;
  background: rgba(255, 255, 255, .15);
}

.page-layout--share .page-section--share-featured .page-actions,
.page-layout--share .page-section--share-entry .page-actions {
  gap: .7rem;
  margin-top: 1.4rem;
}

.page-layout--share .page-section--share-featured .page-action,
.page-layout--share .page-section--share-entry .page-action {
  min-height: 3rem;
  padding: .7rem 1.15rem;
  border-radius: .75rem;
  font-size: .9rem;
}

.page-layout--share .page-main > .page-section--share-footer {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--page-line);
}

.page-layout--share .page-section--share-footer .page-actions {
  margin: 0;
}

.page-layout--share .page-section--share-footer .page-action {
  align-items: flex-end;
  gap: .65rem;
  min-height: 2.75rem;
  padding: .35rem .75rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--page-soft);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.page-layout--share .page-section--share-footer .page-action:hover {
  background: transparent;
  color: var(--page-soft);
  text-decoration: none;
}

.page-layout--share .page-section--share-footer .page-action:active {
  transform: none;
  box-shadow: none;
}

.page-layout--share .page-section--share-footer .page-action:focus-visible {
  outline: none;
}

.page-layout--share .page-section--share-footer .page-action:focus-visible .loading-mark-guide {
  stroke-opacity: 1;
  stroke-width: 2.4;
}

.page-layout--share .page-section--share-footer .page-action-mark-wrap {
  position: relative;
  display: inline-block;
  width: clamp(5.75rem, 18vw, 7.25rem);
  flex: none;
  line-height: 0;
}

.page-layout--share .page-section--share-footer .page-action-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 352.2;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.page-layout--share .page-section--share-footer .page-action-mark-wrap .loading-mark {
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  width: 100%;
  height: .65rem;
  color: var(--page-ink);
  animation: none;
}

.page-layout--share .page-section--share-footer .page-action-mark-wrap .loading-mark-guide {
  stroke: var(--thread-line, #ff1d1d);
  stroke-opacity: .8;
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
}

.page-layout--share .page-section--share-footer .page-action-mark-wrap .loading-mark-thread {
  stroke: var(--thread-line, #ff1d1d);
  animation: none;
}

.page-layout--share .page-section--share-footer .page-action-mark-wrap .loading-mark-needle {
  opacity: 0;
  animation: none;
}

.page-layout--share .page-section--share-footer .page-action:is(:hover, :focus-visible) .loading-mark-thread {
  animation: loading-mark-thread 1.9s cubic-bezier(.55,0,.35,1) infinite;
}

.page-layout--share .page-section--share-footer .page-action:is(:hover, :focus-visible) .loading-mark-needle {
  animation: loading-mark-needle 1.9s cubic-bezier(.55,0,.35,1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-layout--share .page-section--share-footer .page-action:is(:hover, :focus-visible) .loading-mark-thread {
    animation: none;
    stroke-dashoffset: 0;
  }

  .page-layout--share .page-section--share-footer .page-action:is(:hover, :focus-visible) .loading-mark-needle {
    animation: none;
    offset-distance: 100%;
    opacity: 1;
  }
}

@media (max-width: 40rem) {
  .page-layout--share .page-section--share-brand { min-height: 4.25rem; }
  .page-layout--share .page-section--share-featured { padding-top: 2.25rem; }
  .page-layout--share .page-section--share-entry { padding: 1.8rem 0 2.1rem; }
  .page-layout--share .page-media-player { min-height: 12rem; }
  .page-layout--share .page-media-player:has([data-media-fullscreen-transcript]) {
    padding-bottom: 17rem;
  }
  .page-layout--share .page-media-player [data-media-playback-browser-source]:has([data-media-fullscreen-transcript]):not(:fullscreen) {
    overflow: visible;
  }
  .page-layout--share .page-media-player [data-media-playback-browser-source]:has([data-media-fullscreen-transcript]):not(:fullscreen) > video {
    border-radius: 1rem;
  }
  .page-layout--share .page-media-player [data-media-playback-browser-source]:not(:fullscreen) [data-media-fullscreen-transcript] {
    top: calc(100% + .75rem);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100% !important;
    height: 16rem;
  }
  .page-layout--share .page-media-player [data-media-playback-browser-source]:not(:fullscreen) [data-media-fullscreen-transcript] > [data-fullscreen-transcript-resize] {
    display: none;
  }
  .page-layout--share .page-media-player [data-media-playback-browser-source]:not(:fullscreen) [data-media-fullscreen-transcript] > div:last-child {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    background: #171717;
  }
  .page-layout--share .page-section--share-featured .page-actions,
  .page-layout--share .page-section--share-entry .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-layout--share .page-section--share-featured .page-action,
  .page-layout--share .page-section--share-entry .page-action { min-width: 0; padding-inline: .5rem; text-align: center; }
}

@media (max-width: 24rem) {
  .page-layout--share .page-section--share-featured .page-actions,
  .page-layout--share .page-section--share-entry .page-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .page-layout--share .page-action { transition: none; }
}