/* A compact shared identity and a readable WORK page.
   STORY chapter, body and ending typography stays in story.css. */

.wrap {
  width: min(1040px, calc(100% - clamp(40px, 6.6667vw, 96px)));
}

.site-header .top {
  min-height: 72px;
}

/* The same signature opens WORK and STORY. */
.portfolio-hero {
  --paper: #0b0b0b;
  --ink: #f2f1ee;
  --muted: #b2b1aa;
  background: var(--paper);
  color: var(--ink);
}

.portfolio-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  min-height: 236px;
  padding-block: 34px;
}

.portfolio-signature,
.portfolio-identity {
  min-width: 0;
}

.portfolio-signature {
  display: grid;
  gap: 9px;
}

.portfolio-hero .portfolio-name,
.portfolio-hero .portfolio-tagline {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--ink);
  text-wrap: initial;
  white-space: nowrap;
}

.portfolio-identity {
  display: grid;
  gap: 7px;
}

.portfolio-identity p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: pretty;
}

.portfolio-identity strong {
  font-weight: 500;
}

/* The personal introduction returns to paper; chapter styles are untouched. */
.story-introduction {
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(54px, 6vw, 86px) 24px;
}

.story-introduction h1 {
  max-width: 18ch;
  font-size: clamp(36px, 5.2vw, 68px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.045em;
  margin: 0;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.story-introduction .story-intro {
  max-width: 40em;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.95;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 32px 0 0;
  text-wrap: pretty;
}

html[dir="rtl"] .story-introduction h1 {
  letter-spacing: 0;
}

/* News has one clear hierarchy, without a separate repetitive work link. */
.latest-news {
  padding-block: 27px 29px;
}

.latest-news h2.section-label,
#work .section-label,
#about .section-label,
#production .section-label,
.carousel-heading h2.section-label {
  display: block;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 22px;
  text-transform: none;
  text-wrap: balance;
}

.latest-news h2.section-label {
  margin-bottom: 17px;
}

.news-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.news-item {
  min-width: 0;
  border: 0;
  padding: 0;
}

.news-link {
  display: block;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.news-item p,
.news-item .news-status,
.news-item .news-date,
.news-item .news-name {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.news-item .news-status {
  font-weight: 500;
}

.news-item .news-date,
.news-item .news-name {
  margin-top: 2px;
}

.news-link:hover .news-status {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.news-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* One line below the rail, rather than lines under individual cards. */
.carousel .works-stack .project-card,
.related .related-card,
.related-card {
  border-bottom: 0;
  padding-bottom: 0;
}

.rail-stage {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 22px;
}

.card-main {
  gap: 17px;
}

.carousel .works-stack .card-main .card-line h3,
.related-card h3 {
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.03em;
  margin: 0;
}

.carousel .card-content > .micro,
.related-card .micro,
.feature-title .micro {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 10px;
}

.card-content .card-summary {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  margin: 12px 0;
  text-wrap: pretty;
}

.carousel .works-stack .card-role,
.feature-intro .card-role,
.card-content .card-role {
  font-size: 17px;
  line-height: 1.75;
  margin-top: 12px;
}

.card-content .card-view-count,
.carousel .card-view-count {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 9px 0 0;
}

/* Years, companies and duties each have a legible place. */
.profile-list {
  margin-top: 0;
}

.profile-list > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  padding-block: 12px;
}

.profile-list dt,
.profile-list dd,
.profile-list .profile-current dd {
  min-width: 0;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}

.profile-list dt {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.profile-company,
.profile-duty {
  display: block;
}

.profile-company {
  font-weight: 500;
}

.profile-duty {
  margin-top: 3px;
  color: var(--muted);
}

.story-preview-link {
  font-size: 17px;
  line-height: 1.65;
}

/* Collaboration reads as an invitation, with the same text scale. */
#production .services-intro {
  margin-bottom: 28px;
}

#production .collaboration-item h3 {
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}

#production .collaboration-item p {
  font-size: 17px;
  line-height: 1.95;
  margin: 0;
}

/* A restrained closing, social links first and a full email underline. */
.closing-chapter .contact {
  padding-block: 56px 54px;
}

.closing-chapter .contact .contact-kicker {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 28px;
}

.contact-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: end;
  gap: 48px;
}

.closing-chapter .contact h2.contact-headline {
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -.055em;
}

.closing-chapter .contact-meta > .eyebrow {
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 14px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 23px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  font-size: 17px;
  line-height: 1.5;
  color: inherit;
  text-decoration: none;
}

.social-link > svg,
.social-link > img {
  display: block;
  width: 25px;
  height: 25px;
  flex: none;
  object-fit: contain;
}

.social-link .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
}

.social-icon svg,
.social-icon img {
  display: block;
  width: 25px;
  height: 25px;
}

.social-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.closing-chapter .email {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.75;
  letter-spacing: -.025em;
  padding: 0;
  border: 0;
}

.closing-chapter .email::after {
  content: none;
}

.email-address {
  display: inline-block;
  max-width: 100%;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

.contact-tools {
  align-items: center;
  gap: 6px 12px;
  margin-top: 5px;
}

.contact-tools .copy-button,
.contact-tools .icon-copy,
.contact-tools .iconcopy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 10px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.contact-tools .copy-button svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.closing-chapter .contact-tools .copy-status {
  flex: 1 1 180px;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* The teaser remains the final work, followed by its channel. */
.closing-chapter .teaser-heading .eyebrow {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

.closing-chapter .teaser-heading h2 {
  font-family: inherit;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.teaser-heading h2 > span {
  display: inline-block;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  margin-inline-start: 10px;
  vertical-align: baseline;
  color: var(--muted);
}

.closing-chapter .teaser-closing {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  margin: 20px 0 0;
}

.teaser-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
  font-size: 17px;
}

.teaser-links .text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 17px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.channel-avatar {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .portfolio-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 20px;
    min-height: 230px;
    padding-block: 26px;
  }

  .portfolio-signature {
    gap: 7px;
  }

  .portfolio-identity {
    gap: 4px;
  }

  .portfolio-identity p {
    font-size: 16.5px;
    line-height: 1.55;
  }

  .news-items {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .latest-news {
    padding-block: 25px 27px;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .closing-chapter .contact h2.contact-headline {
    font-size: clamp(44px, 12vw, 64px);
  }
}

@media (max-width: 720px) {
  .story-introduction {
    padding-block: 48px 24px;
  }

  .story-introduction h1 {
    font-size: clamp(32px, 8.4vw, 52px);
    line-height: 1.4;
  }

  .story-introduction .story-intro {
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.95;
  }

  .profile-list > div {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding-block: 12px;
  }

  #production .collaboration-item {
    padding-block: 22px;
  }

  #production .collaboration-item h3 {
    font-size: 20px;
  }

  .closing-chapter .contact {
    padding-block: 45px 44px;
  }

  .closing-chapter .contact .contact-kicker {
    margin-bottom: 25px;
  }

  .closing-chapter .email {
    font-size: clamp(18px, 5.6vw, 23px);
  }

  .social-links {
    gap: 8px 18px;
    margin-bottom: 20px;
  }

  .closing-chapter .teaser-heading h2 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-link,
  .social-link {
    transition: none;
  }
}

/* The feature caption follows the same body scale as STORY. */
.feature-caption{font-size:17px;line-height:1.85;letter-spacing:-.015em;margin:22px 0 26px;color:var(--ink)}
.profile-list dd{display:grid;grid-template-columns:minmax(120px,.65fr) minmax(0,1fr);gap:18px;align-items:baseline}
.profile-duty{margin-top:0}
.email-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}
.email-row .contact-tools{display:flex;position:relative;flex:none;margin:0}
.email-row .copy-status:empty{display:none}
.email-row .copy-status:not(:empty){position:absolute;top:100%;inset-inline-end:0;min-width:220px;max-width:calc(100vw - 48px);z-index:1;background:#0b0b0b;padding:8px 0;color:#f2f1ee}
.teaser-closing>strong{display:block;font-weight:500;margin-bottom:6px}
.teaser-closing>span{display:block;max-width:44em;text-wrap:pretty}
.streaming-more{font-size:16px;line-height:1.65;margin-top:8px;min-height:44px}
.platform-links{gap:6px 12px}
.project-card .platform-link{padding:12px;min-width:56px;min-height:56px}
.recognition h2,.recognition-date{color:#151515}
.recognition-status{color:#151515;font-weight:500}
/* Preserve the approved STORY reading width as well as its untouched type rules. */
.story-page .story-body.wrap{width:min(1040px,calc(100% - 96px))}
@media(max-width:1000px){.story-page .story-body.wrap{width:calc(100% - 56px)}}
@media(max-width:720px){
 .story-page .story-body.wrap{width:calc(100% - 40px)}
 .profile-list dd{display:contents}
 .profile-company{grid-column:2}
 .profile-duty{grid-column:1/-1;margin:0}
 .profile-list>div{row-gap:4px;padding-block:12px}
 .email-row .email{font-size:clamp(18px,5.2vw,23px)}
}
.release-countdown{margin:16px 0 0;font-size:32px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.035em}
/* Use the approved STORY body scale for paragraphs throughout WORK. */
.feature-caption,.card-content .card-summary,.carousel .works-stack .card-role,#production .collaboration-item p,main:not(.story-page) .case-section p,main:not(.story-page) .credits .detail-meta p{font-size:clamp(17px,1.35vw,19px);line-height:1.95;letter-spacing:-.015em}