.sk-project-contents:not(.is-docked) { display: none; }
.sk-project-contents summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font: 600 14px/1.4 "Space Grotesk", Arial, sans-serif;
}
.sk-project-contents summary::-webkit-details-marker { display: none; }
.sk-project-contents summary::after { content: "+" / ""; font-size: 22px; font-weight: 400; }
.sk-project-contents details[open] summary::after { content: "−" / ""; }
.sk-project-contents summary:focus-visible,
.sk-project-contents a:focus-visible { outline: 2px solid #746553; outline-offset: 3px; }
.sk-project-contents ul {
  padding: 0 0 12px;
  margin: 0;
  list-style: none;
}
.sk-project-contents a { display: block; padding: 10px 0; font-size: 14px; }
.sk-project-contents.is-docked details {
  position: fixed;
  right: 30px;
  top: 112px;
  z-index: 31;
  max-width: calc(100vw - 36px);
  padding-inline: 16px;
  border: 1px solid #ded7cd;
  background: #fff;
}
.sk-project-contents.is-docked details[open] { width: 240px; }
.sk-project-contents.is-docked details[open] nav { max-height: min(62vh, 36rem); overflow-y: auto; }
.sk-project-contents.is-docked summary { gap: 20px; }
.sk-project-contents.is-docked ul {
  display: grid;
  gap: 0 12px;
}
.sk-project-contents.is-docked a { padding: 7px 0; line-height: 1.4; }
.sk-project-contents.is-docked a { color: #555555; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sk-project-contents-target { scroll-margin-top: 100px; }
.sk-project-contents a[aria-current="location"] {
  color: #746553;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 768px) {
  .sk-project-contents.is-docked details {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .sk-project-contents.is-docked details:not([open]) {
    padding: 0;
    border: 0;
  }
  .sk-project-contents.is-docked summary {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 10px;
    border: 1px solid #ded7cd;
    background: #fff;
    writing-mode: vertical-rl;
    gap: 10px;
  }
  .sk-project-contents.is-docked summary::after { writing-mode: horizontal-tb; }
  .sk-project-contents.is-docked nav { padding-top: 8px; }
  .sk-project-contents.is-docked details[open] summary {
    position: static;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #ded7cd;
    transform: none;
    writing-mode: horizontal-tb;
  }
}
@media (max-height: 560px) and (min-width: 768px) {
  .sk-project-contents.is-docked details[open] { width: 320px; }
  .sk-project-contents.is-docked ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sk-project-contents.is-docked details {
    inset: auto auto max(20px, env(safe-area-inset-bottom)) 18px;
  }
  .sk-project-contents.is-docked details[open] {
    display: flex;
    flex-direction: column-reverse;
    width: min(320px, calc(100vw - 92px));
  }
  .sk-project-contents.is-docked ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-project-contents.is-docked details[open] summary { border-top: 1px solid #ded7cd; }
}
#site-content .sk-project-facts {
  padding-block: clamp(28px, 4vw, 54px);
  background: #f2efeb;
}
.sk-project-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 100px) clamp(32px, 6vw, 120px);
  margin: 0;
}
.sk-project-facts__grid dt {
  margin-bottom: clamp(16px, 2vw, 32px);
  border-bottom: 1px solid #262626;
  color: #262626;
  font: 700 clamp(18px, 2vw, 24px)/1.2 "Space Grotesk", Arial, sans-serif;
  text-transform: uppercase;
}
.sk-project-facts__grid dd { max-width: 38ch; margin: 0; }
.sk-project-facts__grid p { margin: 0; }

@media (max-width: 520px) {
  .sk-project-facts__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.sk-moodboard {
  margin: clamp(28px, 5vw, 72px) 0 0;
}
.sk-moodboard__visual {
  position: relative;
  container-type: inline-size;
  background: #f2efeb;
}
.sk-moodboard img { display: block; width: 100%; height: auto; }
.sk-moodboard figcaption {
  margin-bottom: 12px;
}
.sk-moodboard ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#site-content .sk-moodboard li {
  --leader-width: .9em;
  --leader-height: 2.6em;
  position: absolute;
  top: var(--sample-top);
  left: var(--sample-left);
  max-width: var(--sample-width);
  margin: 0;
  padding: 0;
  color: #1d1814;
  font: 500 clamp(11px, 2.5cqw, 15px)/1.3 "Space Grotesk", Arial, sans-serif;
}
.sk-moodboard li strong { color: inherit; font-weight: 700; letter-spacing: .07em; }
.sk-moodboard li::before,
.sk-moodboard li::after {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--leader-width) + .4em));
}
.sk-moodboard li::before {
  top: .65em;
  width: var(--leader-width);
  height: var(--leader-height);
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: .75;
}
.sk-moodboard li::after {
  top: calc(.65em + var(--leader-height));
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-1.5px, -50%);
}
body.mk-workshop #site-content section.mk-workshop-gallery.sk-project-gallery .row > .col-12 {
  padding-inline: 0;
}
@media (max-width: 1100px) {
  body.mk-workshop #site-content section.mk-workshop-gallery.sk-project-gallery {
    --workshop-gallery-gutter: 40px;
  }
}
@media (max-width: 900px) {
  body.mk-workshop #site-content section.mk-workshop-gallery.sk-project-gallery {
    --workshop-gallery-gutter: 22px;
  }
}
@media (min-width: 768px) {
  body.mk-workshop #site-content section.mk-workshop-gallery.sk-project-gallery .grid-wrapper.single-row {
    /* The two photos span only the first two tracks of the workshop grid. */
    grid-template-rows: repeat(2, calc((min(100vw, 1440px) - var(--workshop-gallery-gutter) * 2 - var(--workshop-gallery-gap) * 2) / 4.5)) !important;
  }
}
.sk-designer-project .author {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  margin: 0;
  background: #f2efeb;
}
.sk-designer-project .mk-brown-designer__photo { display: block; margin: 0; }
.sk-designer-project .mk-brown-designer__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 58% 45%;
}
.sk-designer-project .mk-brown-designer__copy {
  align-self: center;
  padding: clamp(24px, 4vw, 48px);
}
.sk-designer-project .mk-brown-eyebrow,
.sk-designer-project .mk-brown-designer__link {
  color: #746553;
  font: 500 12px/1.6 "Space Grotesk", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sk-designer-project .mk-brown-designer__copy h3 { margin: 20px 0 24px; }
.sk-designer-project .mk-brown-designer__copy p { max-width: 50ch; margin: 0 0 28px; }
.sk-designer-project .mk-brown-designer__link { text-decoration: underline; text-underline-offset: 4px; }
.sk-designer-project .mk-brown-designer__link:focus-visible { outline: 2px solid #746553; outline-offset: 4px; }
@media (max-width: 767px) {
  .sk-designer-project .author { grid-template-columns: minmax(0, 1fr); }
  .sk-designer-project .mk-brown-designer__photo img { height: auto; min-height: 0; aspect-ratio: 3/2; }
}

#site-content .sk-moodboard [data-leader="right"] {
  --leader-height: 3em;
  width: max-content;
}
.sk-moodboard [data-leader="right"]::before,
.sk-moodboard [data-leader="right"]::after {
  left: auto;
  right: calc(100% - 29cqw);
}
.sk-moodboard [data-leader="right"]::before {
  left: calc(100% + .4em);
  width: auto;
  border-left: 0;
  border-right: 1px solid currentColor;
}
.sk-moodboard [data-leader="right"]::after { transform: translate(1.5px, -50%); }
#site-content .sk-moodboard [data-leader="straight"] {
  --leader-width: 9cqw;
  --leader-height: 0px;
}
.sk-moodboard [data-leader="straight"]::before {
  height: 1px;
  border: 0;
  background: currentColor;
  opacity: 1;
  box-shadow: 0 1px 2px #26221d;
}
#site-content .sk-moodboard [data-tone="white"] { color: #fff; }
#site-content .sk-moodboard [data-tone="ivory"] { color: #fff8ee; }
