@font-face {
  font-family: Fraunces;
  src: url('fonts/fraunces-groovy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Fraunces;
  src: url('fonts/fraunces-groovy-italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* A warm, print-inspired treatment for the Groovy theme. */
:root[data-theme="groovy"] {
  /* The four accents come from the wordmark and its three stripes. */
  --groovy-cream: #fff3d6;
  --groovy-dark: #492b13;
  --groovy-brown: #743408;
  --groovy-orange: #dc8004;
  --groovy-mustard: #cc9c04;
  --groovy-olive: #84741c;
  --groovy-light-gold: #f1d384;
  --groovy-stripes: linear-gradient(to bottom,
    var(--groovy-brown) 0 20%, var(--groovy-orange) 20% 40%, var(--groovy-mustard) 40% 60%,
    var(--groovy-olive) 60% 80%, var(--groovy-light-gold) 80%);

  & body {
    --ink: #3d2a18;
    --paper: var(--groovy-cream);
    --muted: #675035;
    --red: var(--groovy-brown);
    --line: #b49d70;
    --sunlight: var(--groovy-mustard);
    background-color: var(--paper);
  }

  & .theme-switch {
    justify-content: flex-end;
    gap: 18px;
    padding-top: 10px;
  }

  & .theme-switch a {
    padding-block: 5px;
    text-decoration: underline;
  }

  & .theme-switch a[aria-current="page"] {
    color: var(--groovy-brown);
    font-weight: 700;
  }

  & header {
    border-bottom: 0;
    background: var(--groovy-stripes) left bottom / 100% 10px no-repeat;
  }

  & .nav-hover-pill,
  & nav:not(.nav-enhanced) .nav-contact {
    background: #efc65a;
    border-color: var(--groovy-brown);
    box-shadow: none;
  }

  & nav.nav-enhanced a.nav-highlighted,
  & nav.nav-enhanced a.nav-highlighted:hover {
    color: var(--ink);
  }

  & .hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 70px);
    padding-block: clamp(44px, 6vw, 82px);
  }

  & h1,
  & h2,
  & .statement blockquote p {
    font-family: Fraunces, 'Cooper Black', Georgia, serif;
    font-weight: 900;
    letter-spacing: -.05em;
    word-spacing: .04em;
    line-height: 1.03;
  }

  & h1 {
    color: var(--groovy-dark);
    font-size: clamp(3rem, 5.35vw, 4.65rem);
    text-shadow: .035em .04em #cc9c0480;
  }

  & h2 {
    font-size: clamp(2.35rem, 4.5vw, 4.25rem);
  }

  & h1 em,
  & h2 em {
    font-weight: inherit;
  }

  & .hero .eyebrow {
    color: var(--groovy-brown);
    font-weight: 700;
    letter-spacing: .1em;
  }

  & .portrait {
    width: 100%;
    max-width: 400px;
    justify-self: end;
    padding: 15px 15px 14px;
    border: 2px solid var(--groovy-dark);
    border-radius: 48% 48% 24px 24px / 37% 37% 24px 24px;
    background: var(--groovy-stripes);
    box-shadow: 7px 8px 0 var(--groovy-dark);
  }

  & .portrait::before {
    display: none;
  }

  & .portrait img {
    height: clamp(290px, 36vw, 455px);
    border: 2px solid var(--groovy-dark);
    border-radius: 48% 48% 16px 16px / 37% 37% 16px 16px;
    object-position: center 30%;
  }

  & .portrait figcaption {
    padding: 11px 0 1px;
    color: var(--groovy-dark);
    text-align: center;
    font-weight: 700;
    letter-spacing: .055em;
  }

  & .portrait figcaption span {
    padding-inline: 3px;
  }

  & .button,
  & .button.light {
    color: var(--groovy-cream);
    background: var(--groovy-dark);
    border: 1px solid var(--groovy-dark);
    border-radius: 999px;
    box-shadow: 3px 4px 0 var(--groovy-mustard);
  }

  & .button:is(:hover, :focus-visible),
  & .button.light:is(:hover, :focus-visible) {
    color: var(--groovy-cream);
    background: var(--groovy-brown);
    border-color: var(--groovy-brown);
  }

  & .band {
    background: #5b4c18;
  }

  & .band::before {
    background: var(--groovy-stripes);
    height: 15px;
  }

  & .band button.sector-trigger:is(:hover, [aria-expanded=true]) {
    color: var(--groovy-light-gold);
    text-decoration: underline;
    text-underline-offset: .35em;
  }

  & .sector-example {
    background: var(--groovy-cream);
    border-color: var(--groovy-brown);
  }

  & .statement,
  & .connect {
    background: var(--groovy-dark) url('groovy-ribbon.svg?v=2') right center / auto 140% no-repeat;
    border: 0;
  }

  & .connect {
    background: var(--groovy-dark) url('groovy-contact-ribbon.svg?v=3') center / min(100%, 1800px) 100% no-repeat;
    padding-block: clamp(20px, 2.4vw, 32px) clamp(100px, 9.6vw, 140px);
  }

  & .statement-layout > div,
  & .connect > .wrap {
    padding: clamp(24px, 5vw, 52px);
    border: 2px solid var(--groovy-dark);
    border-radius: 36px 36px 36px 8px;
    background: var(--groovy-cream);
    box-shadow: 7px 7px 0 var(--groovy-orange);
  }

  & .connect > .wrap {
    padding-block: clamp(18px, 2.3vw, 34px);
  }

  & .connect .eyebrow {
    margin-bottom: clamp(12px, 1.5vw, 20px);
  }

  & .connect .button.light {
    margin-top: 20px;
  }

  & .statement blockquote p {
    max-width: 820px;
    font-size: clamp(1.9rem, 4vw, 3.65rem);
  }

  & .section-label > span::before,
  & .section-heading .eyebrow::before,
  & .teaching > div > .eyebrow::before {
    height: 15px;
    border-radius: 0 14px 14px 0;
    background: var(--groovy-stripes);
  }

  & .experience {
    background: #f4e3b9;
  }

  & .disciplines article:nth-child(1) {
    border-color: var(--groovy-olive);
  }

  & .disciplines article:nth-child(2) {
    border-color: var(--groovy-mustard);
  }

  & .disciplines article:nth-child(3) {
    border-color: var(--groovy-brown);
  }

  & .impact strong,
  & .career h3 {
    font-weight: 700;
  }

  & .teaching aside {
    background: #fff8e9;
    border: 1px solid var(--groovy-dark);
    border-radius: 24px 24px 24px 6px;
    box-shadow: 5px 5px 0 var(--groovy-mustard);
  }
}

@media (max-width: 950px) and (min-width: 651px) {
  :root[data-theme="groovy"] h1 {
    font-size: clamp(2.35rem, 5.4vw, 3.8rem);
  }
}

@media (max-width: 650px) {
  :root[data-theme="groovy"] h1 {
    font-size: clamp(1.8rem, 9.2vw, 4rem);
  }

  :root[data-theme="groovy"] .connect h2 {
    font-size: clamp(1.75rem, 8.3vw, 2.35rem);
  }

  :root[data-theme="groovy"] .connect h2 br {
    display: none;
  }

  :root[data-theme="groovy"] .portrait {
    width: min(100% - 8px, 330px);
  }

  :root[data-theme="groovy"] .portrait img {
    height: clamp(300px, 100vw, 350px);
  }
}