/* Shared type behavior for secondary and tertiary portfolio pages. */
:root {
  --portfolio-type-sans: "Instrument Sans", Arial, sans-serif;
}

body { font-family: var(--portfolio-type-sans); }
main :is(h1,h2,h3) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
main h1 { line-height: .9; letter-spacing: -.06em; }
main h2 { line-height: .98; letter-spacing: -.045em; }

/* Visible shared hierarchy across every secondary and tertiary page. */
main h1 {
  margin-bottom: clamp(2.5rem, 5vw, 5rem) !important;
  font-size: clamp(4.75rem, 8vw, 9rem) !important;
}
main :is(section,.chapter,.lab-section,.article-section) > h2,
main :is(section,.chapter,.lab-section,.article-section) > header h2 {
  max-width: 18ch;
  margin-bottom: clamp(1.75rem, 3vw, 3rem) !important;
  font-size: clamp(2.75rem, 4.7vw, 5rem) !important;
}
main :is(.subtitle,.lead,.section-intro,.hero-line,.reading) {
  max-width: 58ch;
  line-height: 1.58;
}

main h1,
main :is(section,.chapter,.lab-section,.article-section) > h2 { position:relative; }
main h1::after,
main :is(section,.chapter,.lab-section,.article-section) > h2::after {
  content:"✦";
  display:inline-block;
  width:auto;
  margin-left:.16em;
  vertical-align:top;
  color:#ffd38a;
  font-family:Georgia,serif;
  opacity:.46;
  animation:portfolio-spark-glint 5.4s ease-in-out infinite;
}
main :is(section,.chapter,.lab-section,.article-section) > h2::after { width:.2em; opacity:.32; }
@keyframes portfolio-spark-glint { 0%,100%{transform:scale(.62) rotate(-4deg);opacity:.2} 50%{transform:scale(1.36) rotate(10deg);opacity:.78} }

.portfolio-motion-word { display: inline-block; white-space: nowrap; }
.portfolio-motion-word:not(:last-child) { margin-right: .14em; }
.portfolio-motion-letter {
  --portfolio-type-lift: 0px;
  display: inline-block;
  transform: translateY(var(--portfolio-type-lift));
  transform-origin: 50% 85%;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  will-change: transform;
}
.portfolio-motion-heading:hover .portfolio-motion-letter { opacity: .9; }
.portfolio-motion-heading:hover::after { transform:scale(1.28) rotate(12deg); opacity:.68; }

main > section > figure { position:relative; }
main > section > figure::after {
  content:"✦";
  position:absolute;
  right:-10px;
  top:-10px;
  width:22px;
  aspect-ratio:1;
  pointer-events:none;
  color:#ffd38a;
  font:400 24px/1 Georgia,serif;
  text-shadow:0 0 15px rgba(255,211,138,.32);
  animation:portfolio-spark-glint 5.4s ease-in-out infinite;
}

@media (max-width: 700px) {
  main h1 { margin-bottom:2.25rem!important; font-size:clamp(2.75rem,14vw,5rem)!important; }
  main :is(section,.chapter,.lab-section,.article-section) > h2,
  main :is(section,.chapter,.lab-section,.article-section) > header h2 { font-size:clamp(2.35rem,10vw,3.5rem)!important; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-motion-letter { transition: none; }
}