/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · genre: modern-minimal · theme: studied-DNA (supplied marketplace reference) · macrostructure: Catalogue · H6 image=full-bleed, caption=overlaid · F6 ratio=4/3, density=single-rail, action=view · contrast: pass (40–41) · nav/footer: inherited shell · slop: pass (42–49) · mobile: pass (34, 49, 50–57) · icons: Phosphor · generated: OpenAI imagegen, inspected */

.yc365p-welcome-page .yc365p-main__spacer,
.yc365p-welcome-page .yc365p-main > .yc365p-frame {
  display: none;
}

.yc365wl {
  --yc365wl-paper: var(--yc365p-surface);
  --yc365wl-soft: var(--yc365p-surface-soft);
  --yc365wl-ink: var(--yc365p-text);
  --yc365wl-muted: var(--yc365p-text-muted);
  --yc365wl-rule: var(--yc365p-border);
  --yc365wl-signal: var(--yc365p-blue-strong);
  overflow-x: clip;
  color: var(--yc365wl-ink);
  background: var(--yc365wl-paper);
}

.yc365wl-frame {
  width: min(calc(100% - 2rem), 82rem);
  margin-inline: auto;
}

.yc365wl-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(31rem, 68dvh, 43rem);
  align-items: center;
  overflow: hidden;
  background: var(--yc365p-brand-ink);
  color: var(--yc365p-white);
}

.yc365wl-hero__media,
.yc365wl-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.yc365wl-hero__media img,
.yc365wl-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yc365wl-hero__overlay {
  z-index: -1;
  background: oklch(12% 0.02 290 / var(--yc365wl-overlay));
}

.yc365wl-hero__content {
  width: min(calc(100% - 2rem), 72rem);
  padding-block: clamp(3rem, 7dvh, 5rem) clamp(4rem, 9dvh, 6rem);
  margin-inline: auto;
}

.yc365wl-hero h1 {
  max-width: 18ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--yc365p-font-display);
  font-size: clamp(2.25rem, 5vw, 3.9rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.032em;
}

.yc365wl-hero__stats {
  display: grid;
  width: min(100%, 49rem);
  gap: var(--yc365p-space-3);
  padding: var(--yc365p-space-5);
  margin: var(--yc365p-space-6) 0 var(--yc365p-space-5);
  background: oklch(96% 0.008 255 / 0.88);
  color: var(--yc365p-brand-ink);
  border: 1px solid var(--yc365p-white-alpha-50);
  border-radius: var(--yc365p-radius-sm);
  backdrop-filter: blur(8px);
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
}

.yc365wl-hero__stats span {
  display: flex;
  align-items: baseline;
  gap: var(--yc365p-space-2);
}

.yc365wl-hero__stats strong {
  font-family: var(--yc365p-font-mono);
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.yc365wl-hero__lede {
  max-width: 58ch;
  margin: 0 0 var(--yc365p-space-6);
  color: var(--yc365p-footer-text);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
}

.yc365wl-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--yc365p-space-2);
  padding: var(--yc365p-space-3) var(--yc365p-space-5);
  border: 1px solid var(--yc365p-white-alpha-50);
  background: var(--yc365p-white);
  color: var(--yc365p-brand-ink);
  border-radius: var(--yc365p-radius-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--yc365p-motion-fast) var(--yc365p-ease), background-color var(--yc365p-motion-base) var(--yc365p-ease);
}

.yc365wl-button:active { transform: translateY(1px); }

.yc365wl-button--dark {
  border-color: var(--yc365p-brand-ink);
  background: var(--yc365p-brand-ink);
  color: var(--yc365p-white);
}

.yc365wl-live {
  padding: var(--yc365p-space-4) clamp(1rem, 3vw, 2.5rem) var(--yc365p-space-6);
  background: var(--yc365wl-soft);
  color: var(--yc365wl-ink);
  border-bottom: 1px solid var(--yc365wl-rule);
}

.yc365wl-live header,
.yc365wl-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc365p-space-4);
}

.yc365wl-live h2,
.yc365wl-section-head h2 {
  margin: 0;
  font-family: var(--yc365p-font-display);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.yc365wl-live__status {
  display: inline-flex;
  align-items: center;
  gap: var(--yc365p-space-2);
  color: var(--yc365wl-muted);
  font-size: 0.85rem;
}

.yc365wl-live__controls { display: flex; align-items: center; gap: var(--yc365p-space-3); }
.yc365wl-live__controls button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--yc365p-space-1);
  padding: var(--yc365p-space-2) var(--yc365p-space-3);
  border: 1px solid var(--yc365wl-rule);
  background: transparent;
  color: var(--yc365wl-ink);
  border-radius: var(--yc365p-radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.yc365wl-live__status i {
  color: var(--yc365p-green);
  font-size: 0.55rem;
}

.yc365wl-live__viewport {
  display: grid;
  grid-auto-columns: 6.75rem;
  grid-auto-flow: column;
  gap: var(--yc365p-space-4);
  padding-block-start: var(--yc365p-space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.yc365wl-live__viewport::-webkit-scrollbar,
.yc365wl-members__grid::-webkit-scrollbar { display: none; }

.yc365wl-live-card {
  min-width: 0;
}

.yc365wl-live-card a {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.yc365wl-live-card img {
  width: 100%;
  height: 6.75rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--yc365wl-rule);
  border-radius: var(--yc365p-radius-sm);
}

.yc365wl-live-card strong {
  margin-block-start: var(--yc365p-space-2);
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc365wl-live-card small {
  color: var(--yc365wl-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.yc365wl-space { height: clamp(3rem, 7vw, 6rem); }
.yc365wl-space--small { height: clamp(2rem, 4vw, 4rem); }

.yc365wl-community {
  display: grid;
  min-width: 0;
  gap: var(--yc365p-space-8);
}

.yc365wl-members {
  min-width: 0;
  padding-block-start: var(--yc365p-space-2);
}

.yc365wl-section-head {
  padding-block-end: var(--yc365p-space-5);
  border-bottom: 1px solid var(--yc365wl-rule);
}

.yc365wl-section-head a {
  display: inline-flex;
  align-items: center;
  gap: var(--yc365p-space-2);
  color: var(--yc365wl-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.yc365wl-members__grid {
  display: grid;
  grid-auto-columns: minmax(8.5rem, 10rem);
  grid-auto-flow: column;
  gap: var(--yc365p-space-4);
  padding-block-start: var(--yc365p-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.yc365wl-member {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto auto;
  gap: var(--yc365p-space-2);
}

.yc365wl-member__avatar {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--yc365wl-soft);
  border: 1px solid var(--yc365wl-rule);
  border-radius: var(--yc365p-radius-sm);
}

.yc365wl-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.yc365wl-member h3 { margin: 0; overflow: hidden; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.yc365wl-member h3 a { color: inherit; text-decoration: none; }
.yc365wl-member > div { display: flex; gap: var(--yc365p-space-2); }
.yc365wl-member > div a {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--yc365wl-rule);
  color: var(--yc365wl-ink);
  border-radius: var(--yc365p-radius-sm);
  text-decoration: none;
}

.yc365wl-ad {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--yc365p-space-4);
  padding: var(--yc365p-space-6);
  overflow: hidden;
  background: var(--yc365p-brand-ink);
  color: var(--yc365p-white);
  border-radius: var(--yc365p-radius-sm);
}

.yc365wl-ad::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--yc365wl-ad-image) center / cover;
  content: "";
}

.yc365wl-ad::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: oklch(12% 0.02 290 / 0.76);
  content: "";
}

.yc365wl-ad > i { font-size: 2rem; color: var(--yc365p-gold); }
.yc365wl-ad p { max-width: 18ch; margin: 0; font-family: var(--yc365p-font-display); font-size: 1.8rem; font-weight: 700; line-height: 1.05; }
.yc365wl-ad a { display: inline-flex; align-items: center; gap: var(--yc365p-space-2); color: var(--yc365p-white); font-weight: 700; white-space: nowrap; }

.yc365wl-feature,
.yc365wl-trending,
.yc365wl-catalogue { min-width: 0; }

.yc365wl-service-row {
  display: grid;
  min-width: 0;
  gap: var(--yc365p-space-4);
  padding: var(--yc365p-space-4) 0;
  border-bottom: 1px solid var(--yc365wl-rule);
}

.yc365wl-service-row--featured {
  margin-block-start: var(--yc365p-space-5);
  padding: var(--yc365p-space-4);
  background: var(--yc365wl-soft);
  border: 1px solid var(--yc365wl-rule);
  border-radius: var(--yc365p-radius-sm);
}

.yc365wl-service-row__image {
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--yc365wl-soft);
  border-radius: var(--yc365p-radius-sm);
}

.yc365wl-service-row__image img { width: 100%; height: 100%; object-fit: cover; }
.yc365wl-service-row__body { min-width: 0; }
.yc365wl-service-row__id,
.yc365wl-card span { color: var(--yc365wl-muted); font-family: var(--yc365p-font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.yc365wl-service-row h3 { margin: var(--yc365p-space-1) 0; font-family: var(--yc365p-font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.15; }
.yc365wl-service-row h3 a { color: inherit; text-decoration: none; }
.yc365wl-service-row__dates { display: flex; flex-wrap: wrap; gap: var(--yc365p-space-2) var(--yc365p-space-4); margin: 0; color: var(--yc365wl-muted); font-size: 0.8rem; }
.yc365wl-service-row__dates span { display: inline-flex; align-items: center; gap: var(--yc365p-space-1); }
.yc365wl-stars { display: flex; gap: 0.14rem; margin-block-start: var(--yc365p-space-2); color: var(--yc365p-gold); }

.yc365wl-service-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc365p-space-2);
  margin-block-start: var(--yc365p-space-3);
}

.yc365wl-service-row__actions a,
.yc365wl-service-row__actions button,
.yc365wl-vote button {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--yc365p-space-1);
  padding: var(--yc365p-space-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--yc365wl-muted);
  border-radius: var(--yc365p-radius-sm);
  cursor: pointer;
  text-decoration: none;
}

.yc365wl-service-row__actions span { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.yc365wl-service-row__signal { display: flex; align-items: center; justify-content: space-between; gap: var(--yc365p-space-4); }
.yc365wl-service-row__people { display: flex; min-width: 0; max-width: 100%; align-items: center; padding-inline-start: var(--yc365p-space-2); }
.yc365wl-service-row__person { position: relative; display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; margin-inline-start: -0.5rem; place-items: center; border-radius: 50%; color: inherit; text-decoration: none; transition: transform var(--yc365p-motion-fast) var(--yc365p-ease); }
.yc365wl-service-row__person:first-child { margin-inline-start: 0; }
.yc365wl-service-row__person-avatar { width: 100%; height: 100%; border: 2px solid var(--yc365wl-paper); border-radius: 50%; object-fit: cover; }
.yc365wl-service-row--featured .yc365wl-service-row__person-avatar { border-color: var(--yc365wl-soft); }
.yc365wl-service-row__person:focus-visible { z-index: 2; outline: 2px solid var(--yc365p-focus); outline-offset: 2px; }
.yc365wl-service-row__person:active { z-index: 2; transform: translateY(1px); }
.yc365wl-vote { display: grid; grid-template-rows: 2.5rem auto 2.5rem; justify-items: center; border: 1px solid var(--yc365wl-rule); border-radius: var(--yc365p-radius-sm); }
.yc365wl-vote button { min-width: 2.75rem; min-height: 2.5rem; padding: 0; }
.yc365wl-vote strong { font-family: var(--yc365p-font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.yc365wl-catalogue__grid {
  display: grid;
  min-width: 0;
  grid-auto-columns: 7.25rem;
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--yc365p-space-4);
  padding-block-start: var(--yc365p-space-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.yc365wl-catalogue__grid::-webkit-scrollbar { display: none; }

.yc365wl-catalogue {
  width: 100%;
  max-width: none;
  padding: var(--yc365p-space-6) max(1rem, calc((100% - 82rem) / 2));
  background: var(--yc365p-brand-ink);
  color: var(--yc365p-white);
}

.yc365wl-catalogue .yc365wl-section-head { border-color: var(--yc365p-white-alpha-20); }
.yc365wl-catalogue .yc365wl-section-head a { color: var(--yc365p-white); }

.yc365wl-card { position: relative; display: grid; min-width: 0; gap: var(--yc365p-space-2); scroll-snap-align: start; }
.yc365wl-card__image { display: block; width: 7.25rem; height: 7.25rem; aspect-ratio: 1 / 1; overflow: hidden; background: var(--yc365p-brand-slate); border-radius: var(--yc365p-radius-sm); }
.yc365wl-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--yc365p-motion-base) var(--yc365p-ease); }
.yc365wl-card h3 { margin: var(--yc365p-space-1) 0; overflow: hidden; font-family: var(--yc365p-font-display); font-size: 0.82rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.yc365wl-card h3 a { color: inherit; text-decoration: none; }
.yc365wl-card p { margin: 0; color: var(--yc365p-footer-muted); font-size: 0.7rem; }
.yc365wl-card span { color: var(--yc365p-footer-muted); font-size: 0.62rem; }
.yc365wl-card__view { position: absolute; top: var(--yc365p-space-2); right: var(--yc365p-space-2); display: grid; width: 2.25rem; height: 2.25rem; place-items: center; background: var(--yc365wl-paper); color: var(--yc365wl-ink); border-radius: var(--yc365p-radius-sm); text-decoration: none; }

.yc365wl-trending__list { padding-block-start: var(--yc365p-space-3); }
.yc365wl-final { display: flex; justify-content: center; padding-block: clamp(3rem, 7vw, 6rem); }

.yc365sd {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 6vw, 6rem);
}
.yc365sd__media { min-width: 0; overflow: hidden; background: var(--yc365p-surface-soft); border-radius: var(--yc365p-radius-sm); }
.yc365sd__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.yc365sd__body { min-width: 0; align-self: center; }
.yc365sd__id { margin: 0; color: var(--yc365p-text-muted); font-family: var(--yc365p-font-mono); font-size: 0.8rem; }
.yc365sd h1 { margin: var(--yc365p-space-2) 0; overflow-wrap: anywhere; font-family: var(--yc365p-font-display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.04em; }
.yc365sd__meta { display: flex; flex-wrap: wrap; gap: var(--yc365p-space-4); color: var(--yc365p-text-muted); }
.yc365sd__content { max-width: 65ch; margin-block: var(--yc365p-space-6); }

@media (hover: hover) and (pointer: fine) {
  .yc365wl-button:hover { transform: translateY(-1px); background: var(--yc365p-surface-soft); color: var(--yc365p-brand-ink); }
  .yc365wl-button--dark:hover { background: var(--yc365p-brand-slate); color: var(--yc365p-white); }
  .yc365wl-card:focus-within .yc365wl-card__image img,
  .yc365wl-card:hover .yc365wl-card__image img { transform: scale(1.02); }
  .yc365wl-service-row__actions a:hover,
  .yc365wl-service-row__actions button:hover,
  .yc365wl-vote button:hover { border-color: var(--yc365wl-rule); color: var(--yc365wl-ink); }
  .yc365wl-service-row__person:hover { z-index: 2; transform: translateY(-2px); }
}

@media (max-width: 23.5rem) {
  .yc365wl-service-row__signal { gap: var(--yc365p-space-2); }
  .yc365wl-service-row__person { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; margin-inline-start: -0.625rem; }
}

@media (min-width: 40rem) {
  .yc365wl-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yc365wl-community { grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 0.8fr); align-items: stretch; }
  .yc365wl-live__viewport { grid-auto-columns: 7.75rem; }
  .yc365wl-live-card img { height: 7.75rem; }
  .yc365wl-catalogue__grid { grid-auto-columns: 8.5rem; }
  .yc365wl-card__image { width: 8.5rem; height: 8.5rem; }
  .yc365wl-service-row { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); }
  .yc365wl-service-row__signal { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .yc365wl-hero__content { padding-inline: clamp(2rem, 5vw, 5rem); }
  .yc365wl-live__viewport { grid-auto-columns: 8.5rem; }
  .yc365wl-live-card img { height: 8.5rem; }
  .yc365wl-catalogue__grid { grid-auto-columns: 8.75rem; }
  .yc365wl-card__image { width: 8.75rem; height: 8.75rem; }
  .yc365wl-service-row { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto; align-items: center; }
  .yc365wl-service-row__signal { grid-column: auto; justify-content: flex-end; }
  .yc365wl-service-row__image { aspect-ratio: 16 / 10; }
  .yc365sd { grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); }
}

@media (prefers-reduced-motion: reduce) {
  .yc365wl-button,
  .yc365wl-card__image img,
  .yc365wl-service-row__person { transition-duration: 0.01ms; }
}
