/* One family, one weight. Hierarchy is opacity. */

html.aktuell-type,
html.aktuell-type body {
  font-family: var(--aktuell-font, HaasGrot, Helvetica, Arial, sans-serif);
  font-weight: var(--aktuell-font-weight, 400);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.aktuell-type body *:not(script):not(style):not(svg):not(path):not(code):not(pre) {
  font-family: var(--aktuell-font, HaasGrot, Helvetica, Arial, sans-serif) !important;
  font-weight: var(--aktuell-font-weight, 400) !important;
}

/* Count chips stay the original 8px, not the 12px nav labels. */
html.aktuell-type #mainNav.main-nav #projectCount,
html.aktuell-type #mainNav.main-nav #imageCount,
html.aktuell-type #mainNav.main-nav #fieldNotesCount {
  font-family: inherit !important;
  font-size: 8px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

html.aktuell-type h1,
html.aktuell-type h2,
html.aktuell-type h3,
html.aktuell-type h4,
html.aktuell-type .project-active-title,
html.aktuell-type .projects-group-title,
html.aktuell-type .fn-index-heading,
html.aktuell-type .fn-take-title,
html.aktuell-type .fn-takes-title,
html.aktuell-type .fn-body h1,
html.aktuell-type .fn-body h2,
html.aktuell-type .fn-body .fn-headline,
html.aktuell-type .contact-title,
html.aktuell-type .mobile-contact-title,
html.aktuell-type .aktuell-book-title {
  text-wrap: balance;
}

html.aktuell-type p,
html.aktuell-type li,
html.aktuell-type .project-active-desc,
html.aktuell-type .project-active-fact-value,
html.aktuell-type .projects-group-description,
html.aktuell-type .gtk-bio-text,
html.aktuell-type .gtk-bio-more-text,
html.aktuell-type .about-cv-job-desc,
html.aktuell-type .about-cv-list-lead,
html.aktuell-type .fn-lede,
html.aktuell-type .fn-row-caption,
html.aktuell-type .fn-caption,
html.aktuell-type .fn-body blockquote,
html.aktuell-type .inspiration-caption p,
html.aktuell-type .aktuell-book-line,
html.aktuell-type .aktuell-book p,
html.aktuell-type .gtk-slide-text,
html.aktuell-type .gtk-slide-img-caption,
html.aktuell-type .project-card-about-text,
html.aktuell-type .project-card-back-body,
html.aktuell-type .password-disclaimer,
html.aktuell-type .password-modal-message {
  text-wrap: pretty;
}

/* ~9 English words per line. 50ch was too wide on this face (11–13 words);
   42ch lands typical 12px copy at ~9. Essay type is larger, so 34ch.
   About hero bio: 16px (not 24). This face’s 0 is wide; 48ch wraps the
   opener at ~10 words (“I’m a global creative leader working across
   product, brand, and”). 40ch was ~8; 50ch pulls in “culture.” (11).
   Desktop only — mobile keeps 42ch at 12px to match the CV column.
   Bio + Read more stay 16px; they do not Circ with the 12px CV. */
html.aktuell-type {
  --type-measure: 42ch;
  --type-measure-essay: 34ch;
  --type-headline: 12px;
  --type-project: calc(var(--type-headline) - 2px);
  --about-bio-size: 16px;
  --about-bio-measure: 48ch;
}

html.aktuell-type .gtk-bio-text,
html.aktuell-type .gtk-bio-more-text,
html.aktuell-type .projects-group-description,
html.aktuell-type .project-active-desc,
html.aktuell-type .project-active-fact-value,
html.aktuell-type .about-cv-job-desc,
html.aktuell-type .about-cv-list-lead,
html.aktuell-type .fn-row-caption,
html.aktuell-type .fn-caption,
html.aktuell-type .inspiration-caption p,
html.aktuell-type .aktuell-book-line,
html.aktuell-type .aktuell-book p,
html.aktuell-type .gtk-slide-text,
html.aktuell-type .gtk-slide-img-caption,
html.aktuell-type .project-card-about-text,
html.aktuell-type .project-card-back-body,
html.aktuell-type .password-disclaimer,
html.aktuell-type .password-modal-message {
  max-width: min(100%, var(--type-measure));
}

/* Essay column is measured on .fn-body (18px). Subheads are 14px and
   were filling the wider 28rem shell, so 34ch copy sat left of them. */
html.aktuell-type .fn-body {
  width: min(var(--type-measure-essay), calc(100% - 48px));
  max-width: min(var(--type-measure-essay), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

html.aktuell-type .fn-lede {
  max-width: min(100%, var(--type-measure-essay));
}

html.aktuell-type .fn-body p,
html.aktuell-type .fn-body li,
html.aktuell-type .fn-body blockquote {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

html.aktuell-type .fn-body h1,
html.aktuell-type .fn-body h2,
html.aktuell-type .fn-body h3,
html.aktuell-type .fn-body .fn-headline {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Title is 14px; scale 34ch up so it matches the 18px body column. */
html.aktuell-type .page-field-notes.is-fn-take > .fn-take > .fn-take-title {
  width: min(calc(var(--type-measure-essay) * 18 / 14), calc(100% - 48px));
  max-width: min(calc(var(--type-measure-essay) * 18 / 14), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* Beat page-level max-width: 100% / none on the wide running-text blocks. */
html.aktuell-type .page-about .gtk-bio-text,
html.aktuell-type .page-about .gtk-bio-more-text,
html.aktuell-type .page-about .about-cv-body .about-cv-job-desc,
html.aktuell-type .projects-grid .projects-group-description,
html.aktuell-type .projects-grid:not(.list-view) .projects-group-description,
html.aktuell-type .project-active-desc {
  max-width: min(100%, var(--type-measure));
}

html.aktuell-type .projects-grid:not(.list-view) .projects-group-headline {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--type-measure));
}

html.aktuell-type .projects-grid:not(.list-view) .projects-group-description {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

@media print {
  html.aktuell-type p,
  html.aktuell-type li,
  html.aktuell-type .gtk-bio-text,
  html.aktuell-type .gtk-bio-more-text,
  html.aktuell-type .projects-group-description,
  html.aktuell-type .project-active-desc,
  html.aktuell-type .about-cv-job-desc,
  html.aktuell-type .fn-lede,
  html.aktuell-type .fn-body p {
    widows: 2;
    orphans: 2;
  }
}

/* Projects — titles/descs sit 2px under the site headline size */
html.aktuell-type .project-title,
html.aktuell-type .project-category,
html.aktuell-type .projects-grid.list-view .project-title,
html.aktuell-type .projects-grid.list-view .project-category,
html.aktuell-type .project-active-title,
html.aktuell-type .project-active-desc,
html.aktuell-type .project-active-fact-label,
html.aktuell-type .project-active-fact-value {
  font-size: var(--type-project, 10px);
}

/* Projects — expand: title/desc at 80%; team credits quieter at 40% */
html.aktuell-type .project-active-title,
html.aktuell-type .project-active-desc {
  opacity: 0.8;
}

html.aktuell-type .project-card-back-title {
  opacity: 0.8;
}

html.aktuell-type .project-card-back-overview .project-card-about-text {
  opacity: 0.8;
}

html.aktuell-type .project-card-back-facts .project-active-fact-label,
html.aktuell-type .project-card-back-facts .project-active-fact-value {
  opacity: 0.4;
}

html.aktuell-type .project-active-fact-label,
html.aktuell-type .project-active-fact-value {
  opacity: 0.4;
}

html.aktuell-type .project-item.is-active .project-active-facts,
html.aktuell-type .project-item.is-hero .project-active-facts {
  opacity: 1;
}

html.aktuell-type .project-item.is-active .project-active-collapse,
html.aktuell-type .project-item.is-hero .project-active-collapse {
  opacity: var(--type-tertiary, 0.2);
}

html.aktuell-type .project-active-collapse:hover {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .project-title {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .project-category,
html.aktuell-type .projects-grid.list-view .project-category {
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .projects-group-headline.is-revealed .projects-group-title {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .projects-group-headline.is-revealed .projects-group-description {
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .projects-group-headline.is-revealed .projects-group-date {
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .hero-line[data-line="1"].reveal,
html.aktuell-type .projects-hero-line[data-line="1"].reveal,
html.aktuell-type .hero-seen-session .hero-line[data-line="1"],
html.aktuell-type .hero-seen-session .projects-hero-line[data-line="1"] {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .hero-line[data-line="2"].reveal,
html.aktuell-type .projects-hero-line[data-line="2"].reveal,
html.aktuell-type .hero-seen-session .hero-line[data-line="2"],
html.aktuell-type .hero-seen-session .projects-hero-line[data-line="2"] {
  opacity: var(--type-secondary, 0.5) !important;
}

/* Projects intro only — centered title, 22% above the site headline size */
html.aktuell-type #projectsIndexHero.projects-hero-module {
  justify-content: center;
}

html.aktuell-type #projectsIndexHero .hero-text {
  text-align: center;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

html.aktuell-type #projectsIndexHero #heroText,
html.aktuell-type #projectsIndexHero #heroText .projects-hero-line,
html.aktuell-type #projectsIndexHero #heroText .hero-line {
  font-size: calc(var(--type-headline) * 1.22);
  text-align: center;
}

html.aktuell-type #projectsIndexHero #heroText .projects-hero-line[data-line="2"],
html.aktuell-type #projectsIndexHero #heroText .hero-line[data-line="2"] {
  max-width: none;
}

@media (max-width: 768px) {
  html.aktuell-type #projectsIndexHero #heroText,
  html.aktuell-type #projectsIndexHero #heroText .projects-hero-line,
  html.aktuell-type #projectsIndexHero #heroText .hero-line {
    font-size: calc(var(--type-headline) * 1.42);
  }
}

/* About — one size with the nav. Hierarchy is opacity, not scale. */
html.aktuell-type .page-about,
html.aktuell-type .page-about .grid-item,
html.aktuell-type .page-about .grid-item.font-normal,
html.aktuell-type .page-about .grid-item.font-medium,
html.aktuell-type .page-about .grid-item.font-large,
html.aktuell-type .page-about .gtk-bio-text,
html.aktuell-type .page-about .gtk-bio-more-text,
html.aktuell-type .page-about .about-cv-job-title,
html.aktuell-type .page-about .about-cv-job-meta,
html.aktuell-type .page-about .about-cv-job-desc,
html.aktuell-type .page-about .about-cv-list-lead,
html.aktuell-type .page-about .about-cv-agencies-body,
html.aktuell-type .page-about .about-cv-collaborators-line,
html.aktuell-type .page-about .about-cv-collaborators-rest,
html.aktuell-type .page-about .about-fold-toggle,
html.aktuell-type .page-about .gtk-trigger-inline {
  font-size: var(--type-headline, 12px) !important;
  line-height: 1.6;
  letter-spacing: 0;
}

html.aktuell-type .page-about .gtk-bio-text,
html.aktuell-type .page-about .gtk-bio-more-text {
  color: inherit !important;
  opacity: var(--type-primary, 1);
}

/* Cell holds the 16px ch measure so the 48ch column stays put. */
html.aktuell-type .page-about .grid-item.gtk-bio-cell,
html.aktuell-type .page-about .hero-module .grid-container > .grid-item.gtk-bio-cell,
html.aktuell-type .page-about .hero-module .grid-item.span-two.gtk-bio-cell {
  font-size: var(--about-bio-size, 16px) !important;
  width: min(100%, var(--about-bio-measure, 48ch)) !important;
  max-width: min(100%, var(--about-bio-measure, 48ch)) !important;
}

/* Hero bio + Read more stay 16px; CV stays 12px. */
html.aktuell-type .page-about .gtk-bio-cell .gtk-bio-text,
html.aktuell-type .page-about .gtk-bio-cell .gtk-bio-more-text,
html.aktuell-type .page-about .gtk-bio-cell .about-fold-toggle {
  font-size: var(--about-bio-size, 16px) !important;
  max-width: 100%;
}

html.aktuell-type .page-about .about-cv-body .about-cv-job-title {
  color: inherit !important;
  opacity: var(--type-primary, 1);
}

html.aktuell-type .page-about .about-cv-body .about-cv-job-desc {
  color: inherit !important;
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .page-about .about-cv-list-lead {
  color: inherit !important;
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .page-about .about-cv-agencies-body,
html.aktuell-type .page-about .about-cv-collaborators-line,
html.aktuell-type .page-about .about-cv-collaborators-rest,
html.aktuell-type .page-about .about-fold-toggle {
  color: inherit !important;
  opacity: var(--type-tertiary, 0.2);
}

html.aktuell-type .page-about .about-cv-body .about-cv-job-meta,
html.aktuell-type .page-about .grid-module.about-dual-column > .grid-container.about-cv-row > .grid-item:first-child,
html.aktuell-type .gtk-trigger-inline {
  color: inherit !important;
  opacity: var(--type-tertiary, 0.2);
}

html.aktuell-type .page-about .about-fold-toggle:hover,
html.aktuell-type .page-about .about-fold-toggle:focus-visible {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .page-about .about-footer-copy {
  font-variant-numeric: tabular-nums;
}

html.aktuell-type .gtk-trigger-inline:hover {
  opacity: var(--type-primary, 1);
}

/* Writings — headlines 100%, body / lede 50%, captions 20% */
html.aktuell-type .fn-index-heading,
html.aktuell-type .fn-take-title,
html.aktuell-type .fn-takes-title,
html.aktuell-type .fn-index-title,
html.aktuell-type .fn-body h1,
html.aktuell-type .fn-body h2,
html.aktuell-type .fn-body h3,
html.aktuell-type .fn-body .fn-headline {
  color: inherit;
  opacity: var(--type-primary, 1);
}

html.aktuell-type .fn-lede,
html.aktuell-type .fn-body p,
html.aktuell-type .fn-body li,
html.aktuell-type .fn-body blockquote {
  color: inherit;
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .fn-kicker,
html.aktuell-type .fn-takes-kicker,
html.aktuell-type .fn-take-kicker,
html.aktuell-type .fn-rail-meta,
html.aktuell-type .fn-pager-label,
html.aktuell-type .fn-index-num,
html.aktuell-type .fn-takes-num,
html.aktuell-type .fn-read-time,
html.aktuell-type .fn-row-caption,
html.aktuell-type .fn-caption,
html.aktuell-type .fn-slug-edit,
html.aktuell-type .fn-hero-placeholder {
  color: inherit;
  opacity: var(--type-tertiary, 0.2);
}

/* Connect */
html.aktuell-type .contact-title,
html.aktuell-type .mobile-contact-title,
html.aktuell-type .aktuell-book-title {
  opacity: var(--type-primary, 1);
}

html.aktuell-type .contact-centered .grid-item.contact-links a,
html.aktuell-type .mobile-contact-links a,
html.aktuell-type .aktuell-book-line,
html.aktuell-type .aktuell-book-zone {
  color: inherit !important;
  opacity: var(--type-secondary, 0.5) !important;
}

html.aktuell-type .contact-centered .grid-item.contact-links a:hover,
html.aktuell-type .mobile-contact-links a:hover {
  opacity: var(--type-primary, 1) !important;
}

html.aktuell-type .contact-location,
html.aktuell-type .mobile-contact-location {
  color: inherit !important;
  opacity: 1;
}

html.aktuell-type .contact-location-label,
html.aktuell-type .mobile-contact-location-label {
  opacity: var(--type-secondary, 0.5);
}

html.aktuell-type .contact-clock {
  opacity: var(--type-secondary, 0.5);
}

/* Inspiration captions 20%, flush left under the image */
html.aktuell-type .inspiration-caption,
html.aktuell-type .inspiration-caption p {
  color: inherit;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

html.aktuell-type .inspiration-caption p {
  opacity: var(--type-tertiary, 0.2);
}

@media (min-width: 769px) {
  html.aktuell-type .page-about .gtk-bio-text,
  html.aktuell-type .page-about .gtk-bio-more-text {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  html.aktuell-type .page-connect .connect-stage .contact-centered,
  html.aktuell-type .page-connect .grid-module.contact-centered {
    font-size: var(--type-headline, 12px);
    width: min(calc(100% - 40px), var(--type-measure, 42ch)) !important;
    max-width: min(calc(100% - 40px), var(--type-measure, 42ch)) !important;
    margin-inline: auto;
  }

  html.aktuell-type .page-connect .contact-centered .grid-item.contact-links a,
  html.aktuell-type .page-connect .mobile-contact-links a {
    opacity: 1 !important;
    color: #111 !important;
  }

  html.aktuell-type .page-connect .contact-centered .grid-item.contact-links a:hover,
  html.aktuell-type .page-connect .mobile-contact-links a:hover {
    opacity: 1 !important;
  }

  html.aktuell-type .page-connect .contact-location-label,
  html.aktuell-type .page-connect .mobile-contact-location-label,
  html.aktuell-type .page-connect .contact-clock {
    opacity: 1 !important;
  }

  html.aktuell-type .projects-grid:not(.list-view) .projects-group-headline {
    grid-template-columns: 1fr;
  }

  html.aktuell-type .projects-grid:not(.list-view) .projects-group-description {
    justify-self: start;
    width: min(100%, var(--type-measure));
  }

  html.aktuell-type .fn-body {
    width: min(var(--type-measure-essay), calc(100% - 40px));
    max-width: min(var(--type-measure-essay), calc(100% - 40px));
  }

  html.aktuell-type .page-about .about-cv-body .about-cv-job-desc {
    max-width: 100%;
  }

  /* Bio type stays 16px; column width uses 12px ch so it matches the CV. */
  html.aktuell-type .page-about .grid-item.gtk-bio-cell,
  html.aktuell-type .page-about .hero-module .grid-container > .grid-item.gtk-bio-cell,
  html.aktuell-type .page-about .hero-module .grid-item.span-two.gtk-bio-cell {
    font-size: var(--type-headline, 12px) !important;
    width: min(100%, var(--type-measure, 42ch)) !important;
    max-width: min(100%, var(--type-measure, 42ch)) !important;
    margin-inline: auto;
  }

  html.aktuell-type .page-about .gtk-bio-text,
  html.aktuell-type .page-about .gtk-bio-more-text {
    max-width: 100%;
  }

  html.aktuell-type .page-about .hero-module .grid-container {
    max-width: 100% !important;
    align-items: center !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.aktuell-type .project-item.is-active .project-active-facts,
  html.aktuell-type .project-item.is-hero .project-active-facts {
    opacity: 1;
  }
}

html.aktuell-type .page-about .about-cv-collaborations .about-fold .about-fold-panel,
html.aktuell-type .page-about .about-cv-collaborations .about-fold.is-open .about-fold-panel,
html.aktuell-type .page-about .about-cv-collaborations .about-fold-panel-inner,
html.aktuell-type .page-about .about-cv-collaborations .about-cv-agencies-body,
html.aktuell-type .page-about .about-cv-collaborations .about-cv-collaborators-rest {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

html.aktuell-type .page-about .about-cv-collaborations .about-fold-panel[hidden] {
  display: none !important;
}