@import url('fonts.css');

/* Shared editorial type for project pages. Media keeps its original layout. */
.portfolio-project {
  --project-body-size: clamp(18px, 17px + .35vw, 21px);
  --project-heading-size: clamp(26px, 22px + 1vw, 34px);
  --project-copy-color: #d6d6d6;
  font-family: ftnk, "Helvetica Neue", Arial, sans-serif;
}
.portfolio-project .page-header {
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 900px;
  padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.portfolio-project .page-header .title {
  max-width: 23ch;
  padding: 0;
  color: #eee;
  font: 600 clamp(32px, 24px + 2.2vw, 50px)/1.15 ftnk, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
}
.portfolio-project .page-header .description:empty { display: none; }
.portfolio-project .standard-modules .project-module-text,
.portfolio-project .standard-modules .module-caption-container,
.portfolio-project .project-section-heading {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.portfolio-project .standard-modules .project-module-text {
  padding-top: clamp(20px, 3vw, 36px) !important;
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}
.portfolio-project .standard-modules .module-caption-container {
  padding-top: 24px;
  padding-bottom: 16px;
}
.portfolio-project .standard-modules .project-copy,
.portfolio-project .standard-modules .project-copy p {
  color: var(--project-copy-color);
  font-family: ftnk, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--project-body-size) !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6 !important;
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.portfolio-project .standard-modules .project-copy p {
  margin: 0 0 1em;
  padding: 0;
}
.portfolio-project .standard-modules .project-copy > :last-child { margin-bottom: 0; }
.portfolio-project .standard-modules .project-copy h2,
.portfolio-project .project-section-heading h2 {
  margin: 0 0 .65em;
  padding: 0;
  color: #eee;
  font: 600 var(--project-heading-size)/1.25 ftnk, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: left;
  text-wrap: balance;
}
.portfolio-project .standard-modules .project-copy h3 {
  margin: 1.3em 0 .65em;
  color: #eee;
  font: 500 clamp(21px, 19px + .4vw, 24px)/1.35 ftnk, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
.portfolio-project .standard-modules .project-copy a {
  color: #eee;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.portfolio-project .standard-modules .project-copy a:hover { color: #fff; }
.portfolio-project .standard-modules .project-copy .project-byline {
  font-size: max(16px, .85em) !important;
  color: #bcbcbc;
}
.portfolio-project .standard-modules .module-caption.project-copy,
.portfolio-project .standard-modules .module-caption.project-copy p {
  font-size: clamp(17px, 16px + .3vw, 19px) !important;
  line-height: 1.6 !important;
}
.portfolio-project .project-section-heading {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: 28px;
}
.portfolio-project .project-section-heading h2 { margin-bottom: 0; }
.portfolio-project .standard-modules .project-editorial-row {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 0 auto clamp(32px, 5vw, 64px);
}
.portfolio-project .standard-modules .project-editorial-row > .tree-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
}
.portfolio-project .standard-modules .project-editorial-row > .tree-wrapper > .tree-child-wrapper {
  border: 0;
  min-width: 0;
}
.portfolio-project .standard-modules .project-editorial-row .project-module-text {
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.portfolio-project .standard-modules .project-editorial-row .project-copy h2 {
  font-size: clamp(24px, 21px + .7vw, 30px);
}
.portfolio-project .button-module {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  font-family: ftnk, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 26px;
  white-space: normal;
}

/* The ICT case study uses the same typography without changing demo behavior. */
.portfolio-case-study { font-family: ftnk, "Helvetica Neue", Arial, sans-serif; }
.portfolio-case-study .intro h1 {
  font-size: clamp(32px, 24px + 2.2vw, 50px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.portfolio-case-study .context-copy h2,
.portfolio-case-study .story h2 {
  font-size: clamp(26px, 22px + 1vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.portfolio-case-study .intro > div > p,
.portfolio-case-study .context-copy > p,
.portfolio-case-study .story-intro > p {
  font-size: clamp(18px, 17px + .25vw, 20px);
  line-height: 1.6;
  max-width: 65ch;
  text-wrap: pretty;
}
.portfolio-case-study .truth details p {
  font-size: 16px !important;
  line-height: 1.6;
}
.portfolio-case-study .truth summary { font-size: 17px; line-height: 1.4; }

@media (max-width: 900px) {
  .portfolio-project .standard-modules .project-editorial-row > .tree-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .portfolio-project .standard-modules .project-module-text,
  .portfolio-project .standard-modules .module-caption-container,
  .portfolio-project .project-section-heading,
  .portfolio-project .standard-modules .project-editorial-row { width: calc(100% - 40px); }
  .portfolio-project .standard-modules .project-editorial-row .project-module-text { width: 100%; }
  .portfolio-project .standard-modules .module-caption-container { padding-top: 18px; }
}

/* Project periods and publication dates for the living archive. */
.portfolio-project .page-header .description:not(:empty){
  max-width:62ch;margin:20px auto 0;padding:0;color:#b8d8ce;
  font:400 clamp(16px,1.5vw,18px)/1.55 ftnk,"Helvetica Neue",Arial,sans-serif;
  text-align:center;text-wrap:balance;
}
.portfolio-project .standard-modules .project-copy .project-entry-date{
  color:#b8d8ce;font-size:16px!important;line-height:1.5!important;margin:0 0 20px;
}
@media(max-width:540px){
  .portfolio-project .page-header .date-range{white-space:normal}
}