/* Picasso article — history, works, and the philosophy of seeing */
.picasso-article { overflow: visible; }

.picasso-section-label {
  margin-bottom: 9px !important;
  color: #9679be;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .17em;
}

.picasso-exhibition {
  margin: 54px 0 66px;
  padding: 31px 0 29px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.article-body .picasso-exhibition h2,
.article-body .picasso-thesis h2 {
  margin: 0 0 19px;
  padding: 0;
  border: 0;
  font-size: 23px;
}

.article-body .picasso-exhibition h2::after,
.article-body .picasso-thesis h2::after { display: none; }

.picasso-exhibition > p:not(.picasso-section-label):not(.article-source-note) {
  margin-bottom: 20px;
  font-family: var(--serif);
  line-height: 1.95;
}

.picasso-exhibition-facts {
  margin: 26px 0 23px;
  border-top: 1px solid var(--line);
}

.picasso-exhibition-facts > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.picasso-exhibition-facts dt {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
}

.picasso-exhibition-facts dd {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.8;
}

.picasso-exhibition-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
}

.picasso-exhibition-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: var(--brand-deep);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(112, 77, 175, .25);
  text-underline-offset: .25em;
}

.picasso-exhibition-links a:hover { text-decoration-color: currentColor; }

.article-body .picasso-official-quote {
  margin: 34px 0 42px;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 21px;
  line-height: 1.8;
  text-align: center;
}

.article-body .picasso-official-quote::before { display: none; }

.article-body .picasso-official-quote cite {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
}

.picasso-official-quote cite a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: rgba(133, 135, 154, .3);
  text-underline-offset: .2em;
}

.picasso-official-visuals {
  margin: 40px 0 58px;
}

.picasso-official-visuals figure { margin: 0; }

.picasso-official-visuals figure + figure {
  width: 76%;
  margin: 38px 0 0 auto;
}

.picasso-official-visuals a { display: block; }

.picasso-official-visuals img {
  display: block;
  width: 100%;
  height: auto;
}

.picasso-official-visuals figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.75;
}

.picasso-official-visuals figcaption a {
  display: inline;
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: rgba(133, 135, 154, .3);
  text-underline-offset: .2em;
}

.picasso-official-visuals figcaption a:hover,
.picasso-official-quote cite a:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

.picasso-timeline {
  position: relative;
  margin: 42px 0 18px;
  list-style: none;
}

.picasso-timeline::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 28px;
  left: 89px;
  width: 1px;
  background: var(--line-strong);
}

.picasso-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 40px;
  padding: 0 0 34px;
}

.picasso-timeline li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 85px;
  width: 9px;
  height: 9px;
  border: 2px solid #bba5d6;
  border-radius: 50%;
  background: #fff;
}

.picasso-timeline time {
  padding-top: 1px;
  color: #8d75b3;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
}

.article-body .picasso-timeline h3 {
  margin: 0 0 5px;
  font-size: 19px;
  line-height: 1.6;
}

.article-body .picasso-timeline p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.85;
}

.picasso-era-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 35px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.picasso-era-context section {
  padding: 24px 19px 24px 0;
}

.picasso-era-context section + section {
  padding-left: 19px;
  border-left: 1px solid var(--line);
}

.picasso-era-context span {
  display: block;
  color: #a18bbd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

.article-body .picasso-era-context h3 {
  margin: 7px 0 8px;
  font-size: 16px;
  line-height: 1.55;
}

.article-body .picasso-era-context p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
}

.picasso-work-link {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 88px;
  margin: 34px 0 39px;
  padding: 18px 2px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: border-color .2s ease, background-color .2s ease;
}

.picasso-work-link:hover {
  border-color: #d8cce9;
  background: #fcfbfd;
}

.picasso-work-year {
  color: #a189bf;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
}

.picasso-work-link strong {
  display: block;
  background: none;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.picasso-work-link small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}

.picasso-work-link > span:last-child {
  padding-right: 4px;
  color: var(--ink-3);
  font-size: 18px;
  transition: transform .2s ease;
}

.picasso-work-link:hover > span:last-child { transform: translate(2px, -2px); }

.picasso-photo {
  margin: 42px 0 52px;
}

.picasso-photo--portrait {
  width: min(62%, 390px);
  margin-left: auto;
  margin-right: auto;
}

.picasso-photo--right { margin-right: 0; }

.picasso-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  filter: contrast(.96);
}

.picasso-photo figcaption {
  margin-top: 13px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.75;
}

.picasso-photo figcaption strong {
  color: var(--ink-2);
  background: none;
  font-weight: 600;
}

.picasso-photo figcaption a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: rgba(133, 135, 154, .3);
  text-underline-offset: .2em;
}

.picasso-photo figcaption a:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

.picasso-work-figure {
  margin: 45px 0 55px;
}

.picasso-work-figure--portrait {
  width: min(78%, 520px);
  margin-left: auto;
  margin-right: auto;
}

.picasso-work-figure > a {
  display: block;
}

.picasso-work-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.picasso-work-figure figcaption {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.75;
}

.picasso-work-figure figcaption strong {
  color: var(--ink-2);
  background: none;
  font-weight: 600;
}

.picasso-work-figure figcaption a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: rgba(133, 135, 154, .3);
  text-underline-offset: .2em;
}

.picasso-work-figure figcaption a:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

.picasso-viewing-guide {
  margin: 74px 0 78px;
  padding-top: 37px;
  border-top: 1px solid var(--line-strong);
}

.article-body .picasso-viewing-guide h2 {
  margin: 9px 0 25px;
}

.article-body .picasso-viewing-guide h2::after {
  display: none;
}

.picasso-viewing-guide-intro {
  margin-bottom: 34px !important;
}

.picasso-viewing-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.picasso-viewing-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 20px;
  padding: 25px 0 26px;
  border-bottom: 1px solid var(--line);
}

.picasso-viewing-steps li > span {
  padding-top: 3px;
  color: #b2a7c2;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .08em;
}

.article-body .picasso-viewing-steps h3 {
  margin: 0 0 8px;
  color: var(--ink-1);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
}

.article-body .picasso-viewing-steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.9;
}

.picasso-viewing-guide-close {
  margin: 29px 0 0 !important;
}

.picasso-perspectives {
  margin: 46px 0 52px;
  padding: 31px 0 27px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.article-body .picasso-perspectives h3 {
  margin: 0 0 24px;
  font-size: 22px;
}

.picasso-perspectives > p:last-child {
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.9;
}

.picasso-perspective-diagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr)) 38px minmax(96px, 1.15fr);
  align-items: center;
  gap: 9px;
}

.picasso-view {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ddd5e9;
  border-radius: 50%;
  background: #fbf9fd;
  color: #766787;
  font-size: 13px;
}

.picasso-view::before,
.picasso-view::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(138, 99, 207, .28);
  border-radius: 48% 52% 46% 54%;
}

.picasso-view::before { inset: 18% 27% 21%; }
.picasso-view::after { inset: 34% 18% 31% 43%; border-left: 0; }
.picasso-view span { position: relative; z-index: 1; margin-top: 62%; }
.picasso-view.side::before { inset: 17% 31% 22% 24%; border-radius: 44% 57% 45% 52%; }
.picasso-view.side::after { inset: 38% 14% 34% 48%; }
.picasso-view.memory { background: #f8f3fa; }
.picasso-view.memory::before { inset: 22% 23%; transform: rotate(18deg); }
.picasso-view.memory::after { inset: 25% 31%; transform: rotate(-25deg); }
.picasso-view.whole {
  border-color: #cab9de;
  background: linear-gradient(145deg, #f2eafa, #fbecef);
}
.picasso-view.whole::before { inset: 15% 22% 18%; box-shadow: -8px 3px 0 rgba(138, 99, 207, .09), 8px -2px 0 rgba(236, 133, 189, .1); }
.picasso-view.whole::after { inset: 30% 17% 34% 46%; }
.picasso-view-arrow { color: #9b8aaa; font-size: 20px; text-align: center; }

.picasso-thesis {
  margin: 54px 0 61px;
  padding: 31px 0 7px;
  border-top: 1px solid var(--line-strong);
}

.picasso-thesis p:not(.picasso-section-label) {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.95;
}

.picasso-practice { margin-top: 34px; }

.picasso-rights-note {
  margin: 24px 0 0 !important;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .picasso-exhibition { margin: 44px 0 52px; padding: 26px 0 25px; }
  .article-body .picasso-exhibition h2,
  .article-body .picasso-thesis h2 { font-size: 21px; }
  .picasso-exhibition-facts > div { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
  .picasso-exhibition-facts dt { font-size: 13px; }
  .picasso-exhibition-facts dd { font-size: 15px; }
  .picasso-exhibition-links { display: grid; gap: 3px; }
  .picasso-exhibition-links a { font-size: 15px; }

  .article-body .picasso-official-quote { margin: 30px 0 36px; font-size: 19px; }
  .article-body .picasso-official-quote cite { font-size: 11.5px; }
  .picasso-official-visuals { margin: 34px 0 48px; }
  .picasso-official-visuals figure + figure { width: auto; margin-top: 32px; }
  .picasso-official-visuals figcaption { font-size: 12.5px; }

  .picasso-timeline::before { left: 59px; }
  .picasso-timeline li { grid-template-columns: 43px minmax(0, 1fr); gap: 31px; padding-bottom: 30px; }
  .picasso-timeline li::before { left: 55px; }
  .picasso-timeline time { font-size: 12px; }
  .article-body .picasso-timeline h3 { font-size: 18px; }
  .article-body .picasso-timeline p { font-size: 16px; }

  .picasso-era-context { grid-template-columns: 1fr; margin: 25px 0 31px; }
  .picasso-era-context section,
  .picasso-era-context section + section { padding: 19px 0; border: 0; }
  .picasso-era-context section + section { border-top: 1px solid var(--line); }
  .article-body .picasso-era-context h3 { font-size: 18px; }
  .article-body .picasso-era-context p { font-size: 16px; }

  .picasso-work-link { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; margin: 29px 0 35px; }
  .picasso-work-year { font-size: 12px; }
  .picasso-work-link strong { font-size: 16px; }
  .picasso-work-link small { font-size: 12px; }

  .picasso-photo,
  .picasso-photo--portrait,
  .picasso-photo--right { width: auto; margin: 36px 0 45px; }
  .picasso-photo--portrait img { width: min(78%, 330px); margin: 0 auto; }
  .picasso-photo figcaption { font-size: 13px; }

  .picasso-work-figure { margin: 38px 0 47px; }
  .picasso-work-figure--portrait { width: min(90%, 430px); margin-left: auto; margin-right: auto; }
  .picasso-work-figure figcaption { font-size: 12px; }

  .picasso-viewing-guide { margin: 57px 0 61px; padding-top: 29px; }
  .article-body .picasso-viewing-guide h2 { margin-bottom: 21px; font-size: 24px; }
  .picasso-viewing-guide-intro { margin-bottom: 28px !important; }
  .picasso-viewing-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 21px 0 22px; }
  .article-body .picasso-viewing-steps h3 { font-size: 18px; }
  .article-body .picasso-viewing-steps p { font-size: 16px; line-height: 1.85; }
  .picasso-viewing-guide-close { margin-top: 25px !important; }

  .picasso-perspectives { margin: 39px 0 46px; padding: 26px 0 23px; }
  .article-body .picasso-perspectives h3 { font-size: 20px; }
  .picasso-perspective-diagram {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .picasso-view { font-size: 11px; }
  .picasso-view-arrow { grid-column: 1 / -1; transform: rotate(90deg); line-height: 1; }
  .picasso-view.whole { grid-column: 2; }
  .picasso-perspectives > p:last-child { font-size: 16px; }

  .picasso-thesis { margin: 45px 0 50px; padding-top: 26px; }
  .picasso-thesis p:not(.picasso-section-label) { font-size: 17px; }
  .picasso-rights-note { font-size: 13px; }
}

@media (max-width: 390px) {
  .picasso-work-link { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .picasso-work-year { grid-column: 1 / -1; }
  .picasso-work-link small { margin-top: 5px; }
  .picasso-view { font-size: 10px; }
}