/* ============================================================================
   yunikon override layer — front-end stylesheet
   Ported from /Users/juyeongpark/Downloads/yunikon CA/styles.css with --ink etc.
   rewritten as var(--wp--preset--color--*). Scoped .yk-frame removed — applies
   globally because the body itself is the yunikon canvas.
   ========================================================================== */

header.entry-header {
  display: none;
}

.entry-content {
  padding: 0;
}

/* ---- Tokens (mirror of theme.json palette, for legacy --ink consumers) ---- */
:root {
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --mute: var(--wp--preset--color--mute);
  --mute-2: var(--wp--preset--color--mute-2);
  --line: var(--wp--preset--color--line);
  --line-strong: var(--wp--preset--color--ink-soft);
  --paper: var(--wp--preset--color--paper);
  --paper-2: var(--wp--preset--color--paper-2);
  --white: var(--wp--preset--color--white);
  --black: var(--wp--preset--color--ink);
}

/* ---- Base reset & body smoothing ---- */
body {
  color: var(--wp--preset--color--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body img {
  display: block;
  max-width: 100%;
}

/* ---- V2: Studio / Mono (homepage) ---- */
.v2,
body.home,
.yk-v2 {
  background: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--sans);
}
.yk-mono,
.mono {
  font-family: var(--wp--preset--font-family--mono);
  font-feature-settings: "zero", "ss01";
}
.yk-display,
.display {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.yk-eyebrow,
.v2 .eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 0;
}
.yk-rule,
.v2 .rule {
  height: 1px;
  background: var(--wp--preset--color--ink-soft);
  width: 100%;
}

/* ---- V1: Editorial (Team page) ---- */
.v1,
.yk-v1 {
  background: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--sans);
  font-feature-settings: "ss01", "cv11";
}
.v1 .serif,
.yk-serif {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.v1 .display {
  font-family: var(--wp--preset--font-family--serif);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.v1 .ital,
.yk-ital {
  font-style: italic;
}
.v1 .eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}
.v1 .rule {
  height: 1px;
  background: var(--wp--preset--color--ink-soft);
  width: 100%;
}
.v1 .rule--soft {
  background: rgba(10, 10, 10, 0.18);
}

/* ---- Marquee (V2 ticker) ---- */
@keyframes yk-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.yk-marquee-track {
  display: inline-flex;
  gap: 48px;
  padding-right: 48px;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .yk-marquee-track {
    animation: none !important;
  }
}

/* ---- Browser-chrome thumb (portfolio) ---- */
.yk-browser {
  background: #fff;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 6px;
  overflow: hidden;
}
.yk-browser .bar {
  height: 22px;
  background: #fff;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.yk-browser .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--ink);
}
.yk-browser .body {
  position: relative;
  aspect-ratio: 16 / 10;
}

/* ---- Portrait placeholder ---- */
.yk-portrait {
  background: linear-gradient(160deg, #d8d4ca 0%, #b8b2a4 50%, #8a8678 100%);
  position: relative;
  overflow: hidden;
}
.yk-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(0, 0, 0, 0.45) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 95%,
      rgba(0, 0, 0, 0.55) 0 32%,
      transparent 34%
    );
  filter: blur(0.4px);
}
.yk-portrait--alt {
  background: linear-gradient(160deg, #c4bfb2 0%, #9d9788 60%, #6f6a5d 100%);
}
.yk-portrait--dark {
  background: linear-gradient(160deg, #4a4640 0%, #2a2722 100%);
}
.yk-portrait--dark::after {
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255, 255, 255, 0.18) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 95%,
      rgba(255, 255, 255, 0.22) 0 32%,
      transparent 34%
    );
}

/* ---- Abstract portfolio art ---- */
.yk-art {
  position: absolute;
  inset: 0;
}
.yk-art--ed {
  background: var(--wp--preset--color--paper);
}
.yk-art--ed::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  border: 1px solid var(--wp--preset--color--ink);
}
.yk-art--ed::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 38%;
  height: 2px;
  background: var(--wp--preset--color--ink);
}

.yk-art--mono {
  background: #fff;
}
.yk-art--mono::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 11px,
    rgba(0, 0, 0, 0.07) 11px 12px
  );
}
.yk-art--mono::after {
  content: "</>";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 28px;
  color: var(--wp--preset--color--ink);
  letter-spacing: -1px;
}

.yk-art--block {
  background: var(--wp--preset--color--ink);
}
.yk-art--block::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 18%;
  width: 30%;
  height: 64%;
  background: #fff;
}
.yk-art--block::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 30%;
  width: 28%;
  height: 40%;
  background: #fff;
  opacity: 0.35;
}

.yk-art--type {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yk-art--type span {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 64px;
  color: var(--wp--preset--color--ink);
}

.yk-art--grid {
  background: #fff;
}
.yk-art--grid::before {
  content: "";
  position: absolute;
  inset: 14%;
  background:
    linear-gradient(#000, #000) left top / 100% 1px no-repeat,
    linear-gradient(#000, #000) left bottom / 100% 1px no-repeat,
    linear-gradient(#000, #000) left top / 1px 100% no-repeat,
    linear-gradient(#000, #000) right top / 1px 100% no-repeat,
    repeating-linear-gradient(
        90deg,
        transparent 0 24%,
        #000 24% calc(24% + 1px)
      )
      center/100% 100% no-repeat;
}

.yk-art--photo {
  background: linear-gradient(135deg, #2a2722 0%, #6b6457 60%, #c9c2b1 100%);
}
.yk-art--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(255, 255, 255, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 70% 75%, rgba(0, 0, 0, 0.5), transparent 55%);
}

/* ---- Ruler accent ---- */
.yk-tick {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wp--preset--color--mute);
}
.yk-tick::before,
.yk-tick::after {
  content: "";
  height: 1px;
  background: var(--wp--preset--color--ink-soft);
  flex: 1;
}

/* ---- Pill button (V1 + V2) ---- */
.yk-btn,
.wp-block-button.yk-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--wp--preset--color--ink);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--wp--preset--color--ink);
  text-decoration: none;
  line-height: 1;
}
.yk-btn--ghost,
.wp-block-button.yk-btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
}
.yk-btn .arr,
.wp-block-button.yk-btn .wp-block-button__link .arr {
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  display: inline-block;
}
.yk-btn .arr::after,
.wp-block-button.yk-btn .wp-block-button__link .arr::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================================
   Pattern: yunikon/hero-studio-left
   Section 88px 56px 96px · grid 1fr auto · gap 64
   ========================================================================== */

.yk-hero {
  padding: 88px 56px 96px;
  position: relative;
}
.yk-hero-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: start;
}
.yk-hero-text {
  display: flex;
  flex-direction: column;
}
.yk-hero-text > .yk-eyebrow {
  margin-bottom: 40px;
}
.yk-hero-text > h1.yk-hero-headline,
.yk-hero-text > .yk-hero-headline {
  margin: 0;
}
.yk-hero-text > .yk-lead {
  max-width: 540px;
  font-size: 19px;
  line-height: 1.5;
  margin-top: 56px;
  margin-bottom: 0;
  color: var(--wp--preset--color--ink-soft);
}
.yk-hero-cta-row,
.yk-hero-text > .wp-block-buttons.yk-hero-cta-row {
  margin-top: 36px;
  display: flex;
  gap: 14px;
}

/* Right-side metadata stack — borderLeft, 24px padding-left, vertical 24-gap */
.yk-hero-meta-stack {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--preset--color--mute);
  min-width: 220px;
  border-left: 1px solid var(--wp--preset--color--ink);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}
.yk-hero-meta-stack .yk-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yk-hero-meta-stack .yk-meta-key {
  opacity: 0.5;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.yk-hero-meta-stack .yk-meta-val {
  color: var(--wp--preset--color--ink);
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

/* Responsive: collapse stack below 1024 */
@media (max-width: 1024px) {
  .yk-hero {
    padding: 64px 32px 72px;
  }
  .yk-hero-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .yk-hero-meta-stack {
    border-left: none;
    border-top: 1px solid var(--wp--preset--color--ink);
    padding-left: 0;
    padding-top: 32px;
  }
}

/* ============================================================================
   Pattern: yunikon/ticker
   ========================================================================== */

.yk-ticker {
  border-top: 1px solid var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--ink);
  padding: 18px 0;
  overflow: hidden;
}
.yk-ticker-viewport {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.yk-ticker-track {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 16px;
  letter-spacing: 0.02em;
  animation: yk-marquee 40s linear infinite;
  display: inline-flex;
  gap: 48px;
  padding-right: 48px;
}
.yk-ticker-track span {
  flex-shrink: 0;
}

/* ============================================================================
   Pattern: yunikon/services-rows
   ========================================================================== */

.yk-services {
  padding: 120px 56px;
}
.yk-services > .yk-eyebrow {
  margin-bottom: 24px;
}
.yk-services-headline {
  margin: 0 0 80px;
  max-width: 1100px;
}
.yk-services-list {
  display: flex;
  flex-direction: column;
}
.yk-services-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 100px;
  gap: 48px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--wp--preset--color--ink);
  margin: 0;
}
.yk-services-row:last-child {
  border-bottom: 1px solid var(--wp--preset--color--ink);
}
.yk-services-row > p {
  margin: 0;
}
.yk-services-num {
  font-size: 13px;
  color: var(--wp--preset--color--mute);
}
.yk-services-name {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}
.yk-services-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
}
.yk-services-link {
  font-size: 12px;
  color: var(--wp--preset--color--mute);
  text-align: right;
}
@media (max-width: 1024px) {
  .yk-services {
    padding: 80px 32px;
  }
  .yk-services-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 16px 24px;
  }
  .yk-services-name {
    font-size: 36px;
  }
  .yk-services-desc {
    grid-column: 1 / -1;
  }
  .yk-services-link {
    display: none;
  }
}

/* ============================================================================
   Pattern: yunikon/work-grid-dark
   ========================================================================== */

.yk-work-grid-dark {
  padding: 120px 56px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}
.yk-work-grid-dark a {
  color: inherit;
  text-decoration: none;
}
.yk-work-grid-dark .yk-eyebrow {
  color: rgba(246, 243, 236, 0.6);
}
.yk-work-grid-dark h2 {
  color: var(--wp--preset--color--paper);
  margin-top: 24px;
}

.yk-work-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  gap: 32px;
}
.yk-work-grid-header-left {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.yk-work-grid-header-left > * {
  margin: 0;
}
.yk-work-grid-header-link {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
  align-self: end;
}
.yk-work-grid-header-link a {
  border-bottom: 1px solid rgba(246, 243, 236, 0.4);
  padding-bottom: 4px;
}

/* Override post-template's default ul/li so it renders as our 3-col grid */
.yk-work-grid-dark .wp-block-post-template.yk-work-grid,
.yk-work-grid-dark .wp-block-post-template-is-layout-flow.yk-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 56px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.yk-work-grid-dark .yk-work-grid > li {
  list-style: none;
  margin: 0;
}
.yk-work-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dark-mode browser chrome */
.yk-work-grid-dark .yk-browser {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--paper);
}
.yk-work-grid-dark .yk-browser .bar {
  background: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--paper);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.yk-work-grid-dark .yk-browser .bar > p {
  margin: 0;
}
.yk-work-grid-dark .yk-browser .dot {
  border-color: var(--wp--preset--color--paper);
}
.yk-browser-url {
  font-size: 10px;
  margin-left: 10px !important;
  opacity: 0.6;
  color: var(--wp--preset--color--paper);
}

/* Card info row: title+meta left, year right (baseline-aligned) */
.yk-work-card-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
}
.yk-work-card-info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.yk-work-card-title.wp-block-post-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--wp--preset--color--paper);
}
.yk-work-card-meta {
  margin: 0;
  font-size: 11px;
  opacity: 0.55;
  color: var(--wp--preset--color--paper);
}
.yk-work-card-year {
  margin: 0;
  font-size: 11px;
  opacity: 0.55;
  color: var(--wp--preset--color--paper);
}

@media (max-width: 1024px) {
  .yk-work-grid-dark {
    padding: 80px 32px;
  }
  .yk-work-grid-dark .wp-block-post-template.yk-work-grid,
  .yk-work-grid-dark .wp-block-post-template-is-layout-flow.yk-work-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}
@media (max-width: 640px) {
  .yk-work-grid-dark .wp-block-post-template.yk-work-grid,
  .yk-work-grid-dark .wp-block-post-template-is-layout-flow.yk-work-grid {
    grid-template-columns: 1fr;
  }
  .yk-work-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* ============================================================================
   Pattern: yunikon/team-hero (V2 — reuses .yk-hero layout primitives)
   ========================================================================== */

/* Layout, padding, meta-stack, and responsive collapse all come from the
   .yk-hero / .yk-hero-layout rules defined for yunikon/hero-studio-left.
   .yk-team-hero is left on the markup as a future-deltas hook with no rules
   today — bg already inherits white from <body>. */

/* ============================================================================
   Pattern: yunikon/team-grid (V2 — Mona Sans names on white bg)
   ========================================================================== */

.yk-team-grid-section {
  padding: 0 56px 120px;
  background: transparent;
}
.yk-team-grid-section .yk-rule {
  height: 1px;
  background: var(--wp--preset--color--ink);
  width: 100%;
  margin: 0 0 48px;
}
.yk-team-grid-section .wp-block-post-template.yk-team-grid,
.yk-team-grid-section .wp-block-post-template-is-layout-flow.yk-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 64px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.yk-team-grid-section .yk-team-grid > li {
  list-style: none;
  margin: 0;
}
.yk-team-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.yk-team-card > .yk-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
}

/* Featured image as portrait — shows when a real photo is uploaded.
   wp:post-featured-image returns '' (no figure) when no image, so the
   placeholder below renders unobstructed. When figure IS rendered, the
   adjacent-sibling rule below hides the placeholder. */
.yk-team-card .wp-block-post-featured-image.yk-team-card-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: block;
}
.yk-team-card .wp-block-post-featured-image.yk-team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yk-team-card .wp-block-post-featured-image.yk-team-card-photo a {
  display: block;
  width: 100%;
  height: 100%;
}
.yk-team-card .wp-block-post-featured-image + .yk-portrait--placeholder {
  display: none;
}
.yk-team-card-name {
  /* Card-display token (26px) + Mona Sans 600. Overrides .yk-display's tighter
     metrics for the smaller card scale (1.05 line-height vs 0.92, looser tracking). */
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  color: var(--wp--preset--color--ink);
}
.yk-team-card-name.wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.yk-team-card-role {
  font-size: 13px;
  color: var(--wp--preset--color--mute);
  margin: 4px 0 0;
}
.yk-team-card-meta {
  font-size: 12px;
  color: var(--wp--preset--color--mute-2);
  margin: 14px 0 0;
}

/* Portrait variants by position — JSX i % 3 alternation:
   cards 1,4,7 default · 2,5,8 dark · 3,6 alt → nth-child(3n+2 / 3n+3). */
.yk-team-grid-section .yk-team-grid > li:nth-child(3n + 2) .yk-portrait {
  background: linear-gradient(160deg, #4a4640 0%, #2a2722 100%);
}
.yk-team-grid-section .yk-team-grid > li:nth-child(3n + 2) .yk-portrait::after {
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255, 255, 255, 0.18) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 95%,
      rgba(255, 255, 255, 0.22) 0 32%,
      transparent 34%
    );
}
.yk-team-grid-section .yk-team-grid > li:nth-child(3n + 3) .yk-portrait {
  background: linear-gradient(160deg, #c4bfb2 0%, #9d9788 60%, #6f6a5d 100%);
}

@media (max-width: 1024px) {
  .yk-team-grid-section {
    padding: 0 32px 80px;
  }
  .yk-team-grid-section .wp-block-post-template.yk-team-grid,
  .yk-team-grid-section .wp-block-post-template-is-layout-flow.yk-team-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 48px;
  }
}
@media (max-width: 640px) {
  /* Per spec: at 390px, 2 columns + 20px gap. */
  .yk-team-grid-section .wp-block-post-template.yk-team-grid,
  .yk-team-grid-section .wp-block-post-template-is-layout-flow.yk-team-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 32px;
  }
  .yk-team-card-name {
    font-size: 22px;
  }
}

/* ============================================================================
   Pattern: yunikon/team-cta-hiring (V2 dark band — "Senior WordPress Engineer")
   ========================================================================== */

.yk-team-hiring {
  padding: 120px 56px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}
.yk-team-hiring a {
  color: inherit;
}
.yk-team-hiring .yk-eyebrow {
  color: rgba(246, 243, 236, 0.6);
  margin: 0 0 24px;
}
.yk-team-hiring-headline {
  margin: 0 0 40px;
  color: var(--wp--preset--color--paper);
  line-height: 0.95;
}
.yk-team-hiring-body {
  max-width: 540px;
  margin: 0 0 56px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(246, 243, 236, 0.85);
}

/* Mono spec list — 2-col key/value rows, each with a hairline top border */
.yk-team-hiring-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 56px;
  row-gap: 24px;
  margin: 0 0 56px;
  font-size: 12px;
}
.yk-spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 243, 236, 0.18);
}
.yk-spec-key {
  margin: 0;
  color: rgba(246, 243, 236, 0.5);
}
.yk-spec-val {
  margin: 0;
  color: var(--wp--preset--color--paper);
}

.yk-team-hiring-buttons {
  margin: 0;
}

/* Inverted pill button — works against the ink-bg hiring band. */
.yk-btn--on-dark.wp-block-button .wp-block-button__link {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--paper);
}

@media (max-width: 1024px) {
  .yk-team-hiring {
    padding: 96px 32px;
  }
  .yk-team-hiring-specs {
    column-gap: 32px;
  }
}
@media (max-width: 640px) {
  .yk-team-hiring {
    padding: 72px 24px;
  }
  .yk-team-hiring-specs {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}

/* ============================================================================
   Pattern: yunikon/testimonials-3up
   ========================================================================== */

.yk-testimonials {
  padding: 140px 56px;
}
.yk-testimonials .wp-block-post-template.yk-testimonials-grid,
.yk-testimonials .wp-block-post-template-is-layout-flow.yk-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: yk-testimonial;
}
.yk-testimonials .yk-testimonials-grid > li {
  list-style: none;
  margin: 0;
  border-top: 1px solid var(--wp--preset--color--ink);
  padding-top: 28px;
  counter-increment: yk-testimonial;
}
.yk-testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.yk-testimonial-eyebrow {
  margin: 0 0 24px;
}
.yk-testimonial-eyebrow::after {
  content: " / 0" counter(yk-testimonial);
}
.yk-testimonial-quote {
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--wp--preset--color--ink);
}
.yk-testimonial-author {
  margin: 32px 0 0;
  font-size: 12px;
  color: var(--wp--preset--color--ink);
}
.yk-testimonial-role {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  color: var(--wp--preset--color--mute);
}
@media (max-width: 1024px) {
  .yk-testimonials {
    padding: 96px 32px;
  }
  .yk-testimonials .wp-block-post-template.yk-testimonials-grid,
  .yk-testimonials .wp-block-post-template-is-layout-flow.yk-testimonials-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}

/* ============================================================================
   Pattern: yunikon/stack-grid
   ========================================================================== */

.yk-stack {
  padding: 120px 56px;
  border-top: 1px solid var(--wp--preset--color--ink);
}
.yk-stack-headline {
  margin: 24px 0 64px;
}
.yk-stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 32px;
}
.yk-stack-cell {
  border: 1px solid var(--wp--preset--color--ink);
  padding: 24px 24px 28px;
  margin: 0;
}
.yk-stack-cell-name {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--wp--preset--color--ink);
}
.yk-stack-cell-desc {
  font-size: 12px;
  color: var(--wp--preset--color--mute);
  margin: 6px 0 0;
}
@media (max-width: 1024px) {
  .yk-stack {
    padding: 80px 32px;
  }
  .yk-stack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .yk-stack-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Pattern: yunikon/cta-big
   ========================================================================== */

.yk-cta-big {
  padding: 160px 56px 200px;
  background: var(--wp--preset--color--white);
}
.yk-cta-big > .yk-eyebrow {
  margin-bottom: 40px;
}
.yk-cta-big-headline {
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.yk-cta-big-buttons {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.yk-cta-big-meta {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 12px;
  color: var(--wp--preset--color--mute);
}
.yk-cta-big-meta > p {
  margin: 0;
}
@media (max-width: 1024px) {
  .yk-cta-big {
    padding: 96px 32px 120px;
  }
}

/* ============================================================================
   Logo wordmark (shared by nav-header + footer-dark)
   ========================================================================== */

.yk-logo,
.yk-footer-logo {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.yk-logo {
  font-size: 20px;
  color: var(--wp--preset--color--ink);
}
.yk-logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 2px;
}

/* ============================================================================
   Pattern: yunikon/nav-header
   ========================================================================== */

.yk-nav-header {
  padding: 28px 56px;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--white);
  margin: 0;
}
.yk-nav-menu {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 32px !important;
}
.yk-nav-menu > p {
  margin: 0;
}
.yk-nav-menu a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.yk-nav-menu a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.yk-nav-cta {
  margin: 0;
}
.yk-nav-cta .wp-block-button.yk-btn .wp-block-button__link {
  padding: 10px 18px;
  font-size: 13px;
}
@media (max-width: 1024px) {
  .yk-nav-header {
    padding: 20px 32px;
  }
  .yk-nav-menu {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  /* Desktop nav hides entirely below 768 — mobile-header takes over. */
  .yk-nav-header {
    display: none !important;
  }
}

/* ============================================================================
   Pattern: yunikon/mobile-header (below 768px)
   States: default, scrolled (data-scrolled=true → hairline border), open
   (data-open=true on #yk-mobile-menu → full-viewport overlay)
   ========================================================================== */

.yk-mobile-header {
  display: none;
}
@media (max-width: 767.98px) {
  .yk-mobile-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--wp--preset--color--white);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s linear;
  }
  .yk-mobile-header[data-scrolled="true"] {
    border-bottom-color: var(--wp--preset--color--ink);
  }
}

.yk-mobile-header__bar,
.yk-mobile-menu__bar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  gap: 12px;
}

.yk-mobile-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.yk-mobile-header__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-bottom: 2px;
}

.yk-mobile-header__sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--wp--preset--color--ink);
  opacity: 0.2;
}

.yk-mobile-header__context,
.yk-mobile-menu__context {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  line-height: 1;
}

.yk-mobile-header__toggle,
.yk-mobile-menu__close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--wp--preset--color--ink);
}
.yk-mobile-header__toggle:focus-visible,
.yk-mobile-menu__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.yk-burger {
  display: block;
  width: 20px;
  height: 12px;
  position: relative;
}
.yk-burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
}
.yk-burger span:nth-child(1) { top: 0; }
.yk-burger span:nth-child(2) { bottom: 0; }

.yk-x {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
}
.yk-x::before,
.yk-x::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
}
.yk-x::before { transform: rotate(45deg); }
.yk-x::after { transform: rotate(-45deg); }

/* --- Overlay menu --------------------------------------------------------- */

.yk-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--wp--preset--color--white);
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 20px 32px;
  -webkit-overflow-scrolling: touch;
}
.yk-mobile-menu[hidden] {
  display: none;
}
.yk-mobile-menu__bar {
  height: 56px;
  margin: 0 -20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--wp--preset--color--ink);
}

.yk-mobile-menu__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}
.yk-mobile-menu__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--ink);
}
.yk-mobile-menu__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--ink);
}

.yk-mobile-menu__nav {
  display: flex;
  flex-direction: column;
}
.yk-mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  min-height: 56px;
}
.yk-mobile-menu__nav-label {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.yk-mobile-menu__nav-meta {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--mute);
  flex-shrink: 0;
}

.yk-mobile-menu__cta {
  margin-top: 28px;
}
.yk-mobile-menu__cta-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px !important;
  font-size: 15px !important;
  min-height: 56px;
}

.yk-mobile-menu__footer {
  margin-top: 32px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--preset--color--ink);
}
.yk-mobile-menu__footer p {
  margin: 0 0 4px;
}
.yk-mobile-menu__footer a {
  color: inherit;
  text-decoration: none;
}
.yk-mobile-menu__social {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
}
.yk-mobile-menu__social a {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .yk-mobile-header,
  .yk-mobile-menu {
    transition: none !important;
  }
}

/* Body scroll lock — JS sets <body style="overflow: hidden">. This rule
   ensures no horizontal shift if a scrollbar reservation kicks in. */
body.yk-mobile-menu-open {
  overflow: hidden;
}

/* ============================================================================
   Pattern: yunikon/footer-dark
   ========================================================================== */

.yk-footer-dark {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  padding: 88px 56px 36px;
  margin: 0;
}
.yk-footer-dark a {
  color: inherit;
  text-decoration: none;
}
.yk-footer-dark a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yk-footer-dark-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.yk-footer-brand {
  margin: 0;
}
.yk-footer-logo {
  font-size: 28px;
  color: var(--wp--preset--color--paper);
}
.yk-footer-logo .yk-logo-dot {
  width: 7px;
  height: 7px;
  margin-bottom: 4px;
}
.yk-footer-brand-blurb {
  margin: 24px 0 0;
  max-width: 340px;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.55;
}
.yk-footer-col {
  margin: 0;
}
.yk-footer-col-heading {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--sans);
}
.yk-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}
.yk-footer-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 64px 0 20px;
}
.yk-footer-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 12px;
  opacity: 0.5;
  margin: 0;
}
.yk-footer-meta > p {
  margin: 0;
}
@media (max-width: 1024px) {
  .yk-footer-dark {
    padding: 64px 32px 32px;
  }
  .yk-footer-dark-cols {
    grid-template-columns: 1fr 1fr;
    row-gap: 48px;
  }
}
@media (max-width: 640px) {
  .yk-footer-dark-cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Template: single-case_study
   ========================================================================== */

.yk-case-single {
  padding: 80px 56px 120px;
  background: var(--wp--preset--color--white);
}
.yk-case-single > .yk-eyebrow {
  margin: 0 0 24px;
}
.yk-case-title.wp-block-post-title {
  margin: 0 0 40px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--wp--preset--color--ink);
}
.yk-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 64px;
  padding: 18px 0;
  border-top: 1px solid var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--ink);
}
.yk-case-meta-item {
  margin: 0;
  font-size: 13px;
  color: var(--wp--preset--color--mute);
}
.yk-case-meta-item:empty {
  display: none;
}
.yk-case-featured {
  margin: 0 0 64px;
}
.yk-case-featured img {
  width: 100%;
  height: auto;
  display: block;
}
.yk-case-body {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-soft);
}
.yk-case-body > * {
  margin-top: 0;
  margin-bottom: 1.2em;
}
.yk-case-body h2,
.yk-case-body h3 {
  color: var(--wp--preset--color--ink);
  margin-top: 2.4em;
}
@media (max-width: 1024px) {
  .yk-case-single {
    padding: 64px 32px 96px;
  }
}

/* ============================================================================
   Template: archive-case_study
   ========================================================================== */

.yk-case-archive {
  padding: 0;
  background: var(--wp--preset--color--white);
}
.yk-case-archive-header {
  padding: 120px 56px 64px;
  background: var(--wp--preset--color--white);
}
.yk-case-archive-header > .yk-eyebrow {
  margin: 0 0 24px;
}
.yk-case-archive-headline.wp-block-heading {
  margin: 0;
}
@media (max-width: 1024px) {
  .yk-case-archive-header {
    padding: 80px 32px 48px;
  }
}

/* ============================================================================
   Site Editor / hidden post header noise
   (Frost's default page template wraps content in .entry-header; our
   templates render their own headers per pattern.)
   ========================================================================== */

.yk-page header.entry-header,
.yk-case-single header.entry-header,
.yk-case-archive header.entry-header {
  display: none;
}
.yk-page .entry-content,
.yk-case-single .entry-content,
.yk-case-archive .entry-content {
  padding: 0;
}