/* Keep every language separator and proficiency value on shared columns. */
.language-card dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  row-gap: 5px;
  margin: 0;
}

.language-card dl > div {
  display: contents;
}

.language-card dt {
  grid-column: 1;
}

.language-card dd {
  position: relative;
  grid-column: 2;
  margin: 0;
  padding-left: 1cm;
}

.language-card dd::before {
  position: absolute;
  left: 0.35cm;
  margin: 0;
}

@media (max-width: 420px) {
  .photo-gallery-grid {
    grid-template-columns: 1fr;
  }

  .photo-gallery-grid-template {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb-right {
    animation: none;
  }

  .photo-album-carousel .photo-subcategory-grid {
    scroll-behavior: auto;
  }

  .photo-folder-card,
  .photo-folder-arrow,
  .photo-subcategory-card,
  .photo-subcategory-card img,
  .photo-album-scroll-button,
  .photo-gallery-media,
  .photo-lightbox-image,
  .photo-lightbox-nav,
  .photo-lightbox-close {
    transition: none;
  }

  .photo-lightbox.is-loading .photo-lightbox-stage::after {
    animation: none;
  }
}

/* Enlarge the updated letterhead artwork on desktop while retaining the
   established brand-composition anchors. */
@media (min-width: 769px) {
  .brand-showcase-virtual .brand-asset-letterhead {
    width: 17.55%;
    left: calc(27% - 1.5cm);
  }

  .brand-showcase-releaf .brand-asset-letterhead {
    width: 27.3%;
    top: -2%;
    left: calc(30% - 5.5cm);
  }
}

/* Match the Web Design introduction to the About Me body-copy scale. */
.web-intro-description p {
  font-size: clamp(13px, 1.24vw, 17px);
  line-height: 1.48;
}

@media (min-width: 769px) {
  .web-intro-description p {
    font-size: clamp(12px, 0.98vw, 16px);
    line-height: 1.44;
  }
}

@media (min-width: 1600px) {
  .web-intro-description p {
    font-size: 16px;
  }
}

/* Header identity and active-section navigation. */
.hero-name {
  display: none;
}

.site-header .brand-lockup {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  gap: 11px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
}

.site-header .brand-lockup .brand {
  transition: box-shadow 180ms ease, background-color 180ms ease;
}

.brand-name {
  color: inherit;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-header nav a.is-active,
.site-header nav a[aria-current="location"] {
  color: var(--white);
}

.site-header nav a.is-active::after,
.site-header nav a[aria-current="location"]::after {
  height: 2px;
  background: var(--blue-light);
  transform-origin: 0;
  transform: scaleX(1);
}

.site-header .brand-lockup.is-active,
.site-header .brand-lockup[aria-current="location"] {
  color: var(--white);
}

.site-header .brand-lockup.is-active .brand,
.site-header .brand-lockup[aria-current="location"] .brand {
  box-shadow: 0 0 0 2px var(--blue-light);
}

@media (max-width: 768px) {
  .site-header .brand-lockup {
    gap: 8px;
  }

  .brand-name {
    font-size: 10px;
    letter-spacing: 0.055em;
  }
}

@media (max-width: 768px) {
  .site-header .brand-lockup {
    gap: 6px;
  }

  .brand-name {
    font-size: 8.5px;
    letter-spacing: 0.035em;
  }
}

@media (min-width: 1600px) {
  .brand-name {
    font-size: 15px;
  }
}

/* Replace the illustrated interests cloud with the same calm text treatment
   used by the other About Me information cards. */
.interests-card {
  min-height: 0;
}

.interests-list {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 5px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soft-skills-card ul {
  grid-template-columns: max-content max-content;
  gap: 5px 8px;
}

.language-card dl div,
.soft-skills-card ul,
.interests-list {
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: 1cm;
}

/* Keep both About Me card rows on a shared heading baseline. */
.about-details {
  align-items: start;
}

.about-card > .about-card-icon,
.technical-heading > .about-card-icon {
  width: 58px;
  height: 52px;
  margin: 0 0 10px;
  object-fit: contain;
  object-position: left center;
}

.technical-heading {
  margin-bottom: 0;
}


/* Exact Style tile.svg composition: preserve every original proportion,
   crop, radius and spacing instead of reconstructing it with a fluid grid. */
.web-styleguide {
  grid-template-columns: minmax(180px, 240px) minmax(0, 594.25px);
  grid-template-areas: "concept tile";
  justify-content: space-between;
  align-items: start;
  gap: clamp(30px, 4.5vw, 64px);
  width: min(100%, 1100px);
  margin-inline: auto;
}

.web-styleguide::after {
  content: "";
  z-index: 0;
  grid-area: tile;
  width: 100%;
  aspect-ratio: 516.74 / 527.66;
  background: url("../assets/web/Style-tile-2.svg") center / contain no-repeat;
}

.web-styleguide > .web-style-circle,
.web-styleguide > .web-brand-column,
.web-styleguide > .web-values,
.web-styleguide > .web-palette,
.web-styleguide > .web-components,
.web-styleguide > .web-photo-row {
  display: none !important;
}

.web-styleguide > .web-concept {
  grid-area: concept;
  align-self: start;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
}

/* Keep the additionally requested Tierschutzbund logo in the open space of
   the SVG's interface card without moving any element from the original. */
.web-styleguide > .web-components {
  z-index: 1;
  grid-area: tile;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 516.74 / 527.66;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.web-styleguide > .web-components > .component-rule,
.web-styleguide > .web-components > .component-states,
.web-styleguide .component-icons img:not(.component-welfare-icon) {
  display: none;
}

.web-styleguide .component-icons {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.web-styleguide .component-icons .component-welfare-icon {
  display: block;
  position: absolute;
  top: 74.2%;
  left: 78.2%;
  width: 7.4%;
  height: auto;
  margin: 0;
}

@media (max-width: 700px) {
  .web-styleguide {
    grid-template-columns: minmax(0, 594.25px);
    grid-template-areas:
      "concept"
      "tile";
    gap: 24px;
    width: min(100%, 594.25px);
  }

  .web-styleguide > .web-concept {
    padding-top: 0;
  }
}

/* Match the Web Design heading and concept rhythm to the ReLeaf case. */
.web-style-title {
  display: block;
  width: min(100%, 1100px);
  margin: 0 auto clamp(24px, 3vw, 38px);
  line-height: 1;
}

.web-style-title .web-style-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--blue-light);
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 640;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.web-style-title .web-style-name {
  display: block;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 108px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: none;
}

.web-styleguide > .web-concept {
  position: relative;
  top: auto;
  left: 0;
  grid-area: concept;
  align-self: start;
  width: 100%;
  max-width: 320px;
  margin: clamp(28px, 3vw, 56px) 0 0;
  padding: 0;
}

.web-styleguide > .web-concept h3 {
  margin: 0 0 14px;
  color: var(--blue-light);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 640;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.web-styleguide > .web-concept p {
  margin: 0;
  color: rgba(247, 246, 242, 0.82);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .web-style-title {
    margin-bottom: 28px;
  }

  .web-style-title .web-style-name {
    font-size: clamp(54px, 18vw, 78px);
  }

  .web-styleguide > .web-concept {
    position: relative;
    top: auto;
    left: auto;
    grid-area: concept;
    width: 100%;
  }
}

/* Use the same content grid and left edge as the ReLeaf showcase. */
.web-style-title,
.web-styleguide {
  position: relative;
  left: 50%;
  width: min(calc(100vw - 2 * clamp(28px, 5vw, 76px)), 1168px);
  max-width: none;
  transform: translateX(-50%);
}

.web-styleguide {
  grid-template-columns: minmax(280px, 320px) minmax(0, 594.25px);
}

.web-styleguide > .web-concept {
  width: 100%;
}

.web-styleguide > .web-concept p {
  width: 100%;
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .web-styleguide {
    grid-template-columns: minmax(240px, 280px) minmax(0, 540px);
  }
}

@media (max-width: 768px) {
  .web-styleguide {
    grid-template-columns: minmax(210px, 240px) minmax(0, 450px);
  }

  .web-styleguide > .web-concept {
    margin-top: clamp(24px, 5vw, 44px);
  }
}

@media (min-width: 1600px) {
  .web-style-title,
  .web-styleguide {
    width: calc(100% - 2 * var(--wide-inner-gutter));
  }
}

@media (min-width: 1200px) {
  .web-styleguide::after {
    transform: translate(-6cm, 0);
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .web-styleguide::after {
    transform: translate(-4cm, 0);
  }
}

@media (min-width: 701px) {
  .web-style-title {
    left: 50%;
  }
}

/* Blue chapter circles, positioned like the decorative orbs elsewhere. */
.web-project::before {
  content: "";
  display: block;
  z-index: 0;
  pointer-events: none;
  position: absolute;
  top: clamp(88px, 8vw, 132px);
  left: clamp(-185px, -11vw, -115px);
  width: clamp(250px, 27vw, 420px);
  aspect-ratio: 1;
  opacity: 0.78;
  background: url("../assets/web/process/blue-circle-left.svg") center / contain no-repeat;
}

.web-styleguide > .web-style-circle {
  display: block !important;
  z-index: -1;
  top: clamp(-180px, -10vw, -118px);
  right: clamp(-165px, -9vw, -96px);
  left: auto;
  width: clamp(250px, 27vw, 420px);
  opacity: 0.78;
  transform: scaleX(-1);
}

.web-process {
  isolation: isolate;
}

.web-process::before {
  content: "";
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: clamp(-92px, -5vw, -56px);
  left: clamp(-185px, -11vw, -115px);
  width: clamp(250px, 27vw, 420px);
  aspect-ratio: 1;
  opacity: 0.78;
  background: url("../assets/web/process/blue-circle-left.svg") center / contain no-repeat;
}

@media (min-width: 1600px) {
  .web-project::before,
  .web-styleguide > .web-style-circle,
  .web-process::before {
    width: 470px;
  }
}

@media (max-width: 700px) {
  .web-project::before,
  .web-styleguide > .web-style-circle,
  .web-process::before {
    width: 230px;
    opacity: 0.68;
  }

  .web-styleguide > .web-style-circle {
    top: -92px;
    right: -120px;
  }
}

/* Close the visual gap between the raised style tile and the sketches divider. */
@media (min-width: 1600px) {
  .web-process {
    margin-top: -7cm;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .web-process {
    margin-top: -6.5cm;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .web-process {
    margin-top: -5.3cm;
  }
}

@media (min-width: 701px) and (max-width: 768px) {
  .web-process {
    margin-top: -5cm;
  }
}

@media (max-width: 700px) {
  .web-process {
    margin-top: -4.5cm;
  }
}

/* About Me: swap Education and Soft Skills, and align both education paths. */
@media (min-width: 769px) {
  .about-details {
    grid-template-areas:
      "contact languages education"
      "interests soft technical";
  }

  .education-card,
  .technical-card {
    position: relative;
    left: -3cm;
  }

  .language-card,
  .soft-skills-card {
    position: relative;
    left: -1cm;
  }

  .technical-card {
    width: calc(100% + 2cm);
  }

  .contact-card,
  .interests-card {
    position: relative;
    left: 1cm;
  }
}

.education-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  column-gap: 1cm;
}

.education-card > .about-card-icon,
.education-card > h3 {
  grid-column: 1 / -1;
}

.education-card .education-entry {
  min-width: 0;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .about-details {
    grid-template-areas:
      "contact"
      "languages"
      "education"
      "interests"
      "soft"
      "technical";
  }

  .education-card {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .education-card > .about-card-icon,
  .education-card > h3 {
    grid-column: 1;
  }
}

/* A small timeline cue connects the completed school path to the current one. */
.education-card .education-entry:first-of-type {
  position: relative;
}

.education-card .education-entry:first-of-type::after {
  content: "\2192";
  position: absolute;
  top: 8px;
  left: calc(100% - 0.15cm);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .education-card {
    row-gap: 32px;
  }

  .education-card .education-entry:first-of-type::after {
    content: "\2193";
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .web-style-title,
  .web-styleguide {
    left: auto;
    width: 100%;
    transform: none;
  }

  .web-styleguide {
    grid-template-columns: minmax(0, 594.25px);
  }

  .web-styleguide > .web-concept {
    width: 100%;
    max-width: none;
    margin-top: 0;
  }
}

@media (min-width: 769px) {
  .software-grid {
    grid-template-columns: repeat(6, minmax(32px, 1fr));
    column-gap: clamp(12px, 1.1vw, 18px);
  }
}

@media (min-width: 769px) {
  .education-card .education-entry:first-of-type .education-copy span {
    white-space: nowrap;
  }

  .education-card .education-entry:nth-of-type(2) {
    position: relative;
    left: 0.5cm;
  }

  .education-card .education-entry:first-of-type::after {
    left: calc(100% + 0.35cm);
  }
}

/* Keep a consistent 10% crop on every decorative circle touching an edge. */
.light-orb-left {
  left: 0;
  translate: -10% 0;
}

.light-orb-right {
  right: 0;
  translate: 10% 0;
}

.section-orb-left {
  left: calc(50% - 50vw);
  translate: -10% 0;
}

.section-orb-right {
  right: calc(50% - 50vw);
  translate: 10% 0;
}

.process-circle-left {
  left: calc(50% - 50vw);
  translate: -10% 0;
  transform: none;
}

.process-circle-right {
  right: calc(50% - 50vw);
  translate: 10% 0;
  transform: scaleX(-1);
}

.web-project::before {
  left: 0;
  translate: -10% -3cm;
}

.web-styleguide > .web-style-circle {
  right: calc(50% - 50vw);
  translate: 10% 0;
}

.web-process::before {
  left: calc(50% - 50vw);
  translate: -10% 0;
}

.about-panel {
  border-radius: clamp(46px, 6vw, 86px);
}

.web-style-title .web-style-name {
  font-family: "semplicitapro", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.015em;
}

.process-heading h3 {
  font-family: "semplicitapro", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Shared typography system for body copy, labels and compact metadata. */
:root {
  --font-body: "menco", sans-serif;
  --body-copy-size: clamp(15px, 1vw, 17px);
  --body-copy-leading: 1.55;
  --meta-copy-size: clamp(13px, 0.8vw, 14px);
}

.about-intro p,
.about-card p,
.about-card a,
.about-card dt,
.about-card dd,
.about-card li,
.web-intro-description p,
.web-styleguide > .web-concept p,
.responsive-note p,
.brand-description-block > p:not(.eyebrow):not(.status-note),
.virtual-copy > p:last-child,
.releaf-copy > p:last-child,
.editorial-intro-description p,
.editorial-concept p {
  font-family: var(--font-body);
  font-size: var(--body-copy-size);
  font-weight: 300;
  font-style: normal;
  line-height: var(--body-copy-leading);
}

.about-card dt,
.about-card strong {
  font-weight: 700;
}

.eyebrow,
.web-style-title .web-style-kicker,
.web-styleguide > .web-concept h3,
.responsive-note h4,
.editorial-concept h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
}

.education-entry > p:first-child,
.status-note {
  font-family: var(--font-body);
  font-size: var(--meta-copy-size) !important;
  font-weight: 300;
  font-style: normal;
  line-height: 1.45;
}

/* Einheitlicher Stil fuer kleine inhaltliche Zwischenueberschriften. */
.web-style-title .web-style-kicker,
.web-styleguide > .web-concept h3,
.responsive-note h4,
.wireframe-note h4,
.editorial-concept h3,
.virtual-copy .eyebrow,
.releaf-copy .eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.web-style-title .web-style-kicker,
.web-styleguide > .web-concept h3,
.responsive-note h4,
.editorial-concept h3,
.releaf-copy .eyebrow {
  color: var(--blue-light);
}

.virtual-copy .eyebrow {
  color: var(--blue);
}

.wireframe-note h4 {
  color: var(--ink);
}

.responsive-note h4,
.wireframe-note h4,
.editorial-concept h3 {
  margin-bottom: 14px;
}