/* Shared editorial roles for project notebooks. Project media keep their own composition. */
.wl-note-heading { min-width: 0; }
.wl-note-heading .wl-note-title,
#projects-inner .wl-note-title {
  margin: 0;
  color: var(--ink, #171813);
  font: 500 clamp(36px, 5vw, 74px)/1.02 var(--sans, Arial, sans-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}
html[dir="rtl"] .wl-note-title { letter-spacing: normal; }
.wl-note-eyebrow,
#projects-inner .wl-note-eyebrow {
  margin: 0 0 10px;
  color: var(--muted, #62635B);
  font: 400 12px/1.5 var(--sans, Arial, sans-serif);
}
html #projects-inner [data-case-notebook] .wl-case-intro > .wl-note-heading { grid-column: 1 / span 5; }
html #projects-inner [data-case-notebook] .wl-case-intro > .wl-ci-copy { grid-column: 7 / -1; align-self: end; }
html #projects-inner [data-case-notebook] .wl-case-intro > .wl-ci-copy > .wl-ci-description { margin: 0; }
html #projects-inner [data-case-notebook] > .wl-case-intro { row-gap: 16px; }
.wl-note-brief { max-inline-size: 64ch; margin-block: 0 24px; }
.wl-note-lead, .wl-note-copy > p:not(.wl-note-eyebrow) {
  max-inline-size: 48ch;
  margin: 0 0 12px;
  color: var(--ink, #171813);
  font: 400 clamp(16px, 1.45vw, 20px)/1.5 var(--sans, Arial, sans-serif);
  text-wrap: pretty;
}
.wl-note-credit,
#projects-inner .wl-note-credit {
  margin: 10px 0 0;
  color: var(--muted, #62635B);
  font: 400 13px/1.5 var(--sans, Arial, sans-serif);
}
.wl-note-credit a, .wl-note-link { text-decoration: underline; text-underline-offset: .25em; }
.wl-note-credit span { display: block; }
.wl-note-publication, .wl-note-materials, .wl-note-author { margin-block: clamp(28px, 5vw, 72px) 0; }
.wl-note-publication { margin-block-start: 0; }
.wl-note-publication .wl-note-heading { margin-block-end: clamp(24px, 4vw, 48px); }
.wl-note-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--wl-gap, 24px);
  align-items: start;
}
.wl-note-split > :first-child { grid-column: 1 / span 6; min-width: 0; }
.wl-note-split > .wl-note-copy { grid-column: 8 / -1; min-width: 0; }
.wl-note-split figure { margin: 0; }
.wl-note-split figure img { display: block; max-inline-size: 100%; block-size: auto; }
.wl-note-split .wl-note-book { max-inline-size: 360px; }
.wl-note-author > figure { max-inline-size: 230px; }
:is(.wl-note-publication .wl-note-split, .wl-note-author) > figure:first-child { grid-column: 1 / span 5; }
:is(.wl-note-publication, .wl-note-author) .wl-note-copy { grid-column: 6 / -1; }
.wl-note-author { padding-block-start: 24px; border-block-start: 1px solid var(--line, #E3E3DC); }
.wl-note-copy > h5 { margin: 0 0 12px; color: var(--ink, #171813); font: 500 clamp(24px, 3vw, 40px)/1.12 var(--sans, Arial, sans-serif); text-wrap: balance; }
#projects-inner .wl-note-section-title { font-size: clamp(25px, 3vw, 38px); margin-block-end: 20px; }
.wl-note-figures img { max-block-size: 65svh; object-fit: contain; object-position: start; }
.wl-note-figures figure[hidden] { display: none !important; }
.wl-note-picker, .meta-notebook-index { display: grid; align-content: start; }
.wl-note-picker button, .meta-notebook-index button {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  min-block-size: 44px;
  padding: 10px 0;
  text-align: start;
  color: var(--ink, #171813);
  border: 0;
  border-block-start: 1px solid var(--line, #E3E3DC);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.wl-note-picker button > span, .meta-notebook-index button > span:first-child { color: var(--muted, #62635B); font-size: 12px; }
.wl-note-picker button[aria-pressed="true"], .meta-notebook-index button[aria-pressed="true"] { font-weight: 600; }
.wl-note-picker button[aria-pressed="true"] > span, .meta-notebook-index button[aria-pressed="true"] > span:first-child { color: var(--gold, #9E7C12); }
.wl-note-disclosure { margin-block-start: 24px; border-block: 1px solid var(--line, #E3E3DC); }
.wl-note-disclosure summary { min-block-size: 44px; padding-block: 12px; cursor: pointer; }
.wl-note-disclosure p { max-inline-size: 65ch; margin-block: 0 16px; }
html #case-metamorphosis .meta-showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px var(--wl-gap, 24px);
  width: 100%;
}
.meta-showcase > :is(.meta-switcher, .meta-ending, .meta-source, .meta-load-status) { grid-column: 1 / -1; }
.meta-showcase > :is(.meta-stage, .meta-bar) { grid-column: 1 / span 8; }
.meta-showcase > .meta-notebook-index { grid-column: 9 / -1; grid-row: 2 / span 2; max-block-size: min(58svh, 480px); overflow: auto; }
.meta-notebook-index button { font-size: 14px; }
#case-archives .archive-project-index button .wl-note-format { grid-column: 2; display: block; color: var(--muted, #62635B); font-size: 11px; }
#case-archives .archive-project-index button[aria-current="true"] { box-shadow: inset 2px 0 var(--gold, #9E7C12); }
html[dir="rtl"] #case-archives .archive-project-index button[aria-current="true"] { box-shadow: inset -2px 0 var(--gold, #9E7C12); }
#projects-inner #case-racionz .galed-phase-description [data-memory-label] { font-weight: 600; color: var(--ink, #171813); }
#projects-inner #case-racionz .galed-photo-credit a { text-decoration: underline; text-underline-offset: .25em; }
.wl-note-audio-caption { grid-column: 1 / -1; display: block; margin: 8px 0 0; color: var(--muted, #62635B); font: 400 12px/1.45 var(--sans, Arial, sans-serif); }
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-case-footer.wl-note-footer {
  box-sizing: border-box;
  display: grid !important;
  grid-template: "back contact external" / minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  position: relative;
  transform: none;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(32px, 5vw, 72px) 0 0 !important;
  padding: 24px 0 !important;
  border: 0;
  border-block-start: 1px solid var(--line, #E3E3DC);
  background: transparent !important;
  box-shadow: none;
}
html body :is(#wl-project-viewer #projects-inner#projects-inner #case-cisco, #case-cisco) .wl-case-footer.wl-note-footer { border-block-start: 0; }
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-note-footer .wl-case-footer-contact {
  grid-area: contact;
  justify-self: center;
  display: grid !important;
  justify-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink, #171813) !important;
  font: 500 16px/1.4 var(--sans, Arial, sans-serif) !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-note-footer .wl-case-footer-contact::before {
  content: '';
  display: block;
  width: 42px;
  height: 23px;
  border-radius: 50%;
  background: var(--ink, #171813);
  box-shadow: inset 0 3px 0 #88888855;
}
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-note-footer .wl-case-footer-contact::after { content: none !important; }
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-note-footer .wl-case-footer-back { grid-area: back; justify-self: start; }
html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-note-footer .wl-case-footer-external { grid-area: external; justify-self: end; }
.wl-note-footer a:focus-visible, .wl-note-picker button:focus-visible, .meta-notebook-index button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 760px) {
  html #projects-inner [data-case-notebook] .wl-case-intro > :is(.wl-note-heading,.wl-ci-copy) { grid-column: 1 / -1; }
  .wl-note-split > :is(:first-child,.wl-note-copy) { grid-column: 1 / -1; }
  .wl-note-materials .wl-note-picker { grid-row: 1; }
  :is(.wl-note-publication .wl-note-split, .wl-note-author) > figure:first-child,
  :is(.wl-note-publication,.wl-note-author) .wl-note-copy { grid-column: 1 / -1; }
  .wl-note-publication .wl-note-copy { grid-row: 1; }
  .wl-note-split .wl-note-book { max-inline-size: min(75%, 280px); }
  html #case-metamorphosis .meta-showcase > * { grid-column: 1 / -1; grid-row: auto; }
  .meta-showcase > .meta-notebook-index { max-block-size: 180px; }
  html body :is(#wl-project-viewer #projects-inner#projects-inner, #case-cisco) .wl-case-footer.wl-note-footer { grid-template: "contact contact" "back external" / 1fr 1fr; row-gap: 18px; }
}

