:root {
  --oxide: #8b3c29;
  --forest: #203b35;
  --buff: #e6d6b3;
  --char: #222c28;
}
.skip {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 50;
  background: white;
  padding: 12px;
}
.skip:focus {
  top: 8px;
}
#chrome nav {
  gap: 25px;
  height: 62px;
}
.brand a {
  white-space: nowrap;
}
.nav-context {
  flex: 1;
  display: flex;
  gap: 19px;
  align-items: center;
  font-size: 13px;
}
.nav-context a,
.nav-context button,
.navtools button {
  padding: 10px 0;
}
.menu-open {
  display: none;
}
.pan {
  position: relative;
  scrollbar-width: none;
  align-items: stretch;
  cursor: grab;
}
.pan::-webkit-scrollbar {
  display: none;
}
.pan.dragging {
  cursor: grabbing;
}
.pan .frame,
.pan .spread {
  flex: 0 0 94%;
  scroll-snap-align: start;
}
.pan > .spread:last-child {
  flex-basis: 100%;
}
.pan .a-first .canvas {
  background: #e9ebe2;
}
.a-first .mast {
  top: -43px;
  font-size: 190px;
  letter-spacing: 0.18em;
}
.a-first .a-sheet {
  z-index: 1;
}
.a-sheet span {
  display: block;
  position: absolute;
  left: -15px;
  top: 12px;
  background: #f6f1df;
  color: #25342d;
  padding: 6px 11px;
  font-size: 15px;
  transform: rotate(-9deg);
}
.a-first .window {
  top: 151px;
}
.pan .spread {
  position: relative;
  overflow: hidden;
  height: var(--frameheight);
}
.spread h2 {
  font-family: var(--serif);
  letter-spacing: -0.06em;
  line-height: 1.11;
}
.spread p,
.eyebrow {
  font: 500 13px/1.5 var(--sans);
  letter-spacing: 0.11em;
}
.spread-guide {
  display: flex;
  gap: clamp(12px, 3vw, 42px);
  align-items: center;
  min-height: 62px;
  padding: 4px 4vw;
  background: #f6f5ed;
}
.spread-guide button {
  color: #58645b;
  padding: 11px 0;
  font-size: 14px;
}
.spread-guide button[aria-current="true"] {
  color: #1c3933;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 7px;
}
.spread-guide > div {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.spread-guide > div button {
  min-width: 38px;
  font: 22px Georgia;
}
.spread-guide button:disabled {
  opacity: 0.28;
}
.group-spread {
  background: #bf7958;
  color: #261d18;
}
.group-portrait {
  position: absolute;
  inset: 0 auto 13% 0;
  width: 37%;
  background: #382e26;
}
.group-photo,
.group-photo img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: 49% 29%;
}
.group-person {
  position: absolute;
  bottom: 5%;
  left: 7%;
  color: white;
  text-shadow: 0 2px 5px #161510;
  font: 700 clamp(17px, 2.5vw, 40px) var(--serif);
}
.group-copy {
  position: absolute;
  left: 41%;
  top: 9%;
}
.group-copy h2 {
  font-size: clamp(40px, 6.8vw, 110px);
  margin: 0.16em 0 0.27em;
}
.group-copy a,
.decision-type a {
  display: inline-block;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 7px;
}
.group-paper {
  position: absolute;
  top: 38%;
  right: -3%;
  width: 29%;
  transform: rotate(9deg);
  box-shadow: -6px 6px 16px #35201655;
}
.group-barnard {
  position: absolute;
  left: 39%;
  top: 76%;
  display: grid;
  gap: 7px;
}
.group-barnard a {
  font: 700 clamp(21px, 2.6vw, 45px) var(--serif);
}
.group-barnard span,
.group-barnard small {
  font-size: 13px;
}
.decision-spread {
  background: #233341;
  color: #f5e7ca;
}
.decision-type {
  position: absolute;
  left: 6%;
  top: 12%;
  z-index: 1;
}
.decision-type h2 {
  font-size: clamp(59px, 8.4vw, 136px);
  color: #f0dfb9;
  margin: 0.1em 0 0.25em;
}
.paint-wrap {
  position: absolute;
  left: 39%;
  top: 0;
  width: 37%;
  height: 100%;
}
.simon-paint img,
.simon-paint {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 48% 28%;
}
.paint-name {
  position: absolute;
  bottom: 7%;
  left: 7%;
  font: 700 clamp(26px, 3.3vw, 55px) var(--serif);
  color: #fff3c9;
  text-shadow: 0 2px 6px #301910;
}
.machine-detail {
  position: absolute;
  right: -2%;
  top: 5%;
  width: 24%;
  transform: rotate(3deg);
}
.machine-detail span {
  display: block;
  padding: 7px;
  background: #e6e5d9;
  color: #25372e;
  font-size: 13px;
}
.newell-entry {
  position: absolute;
  right: 2%;
  bottom: 13%;
  width: 19%;
  display: grid;
  gap: 12px;
}
.newell-entry a {
  font: 600 clamp(16px, 1.9vw, 32px) var(--serif);
}
.object-view {
  max-width: 1500px;
  margin: auto;
  display: grid;
  grid-template-columns: 40% 1fr;
  min-height: 80vh;
  background: #eeeae0;
}
.object-art {
  display: grid;
  place-items: center;
  background: #344d48;
  padding: 6vw;
  overflow: hidden;
}
.object-art img {
  max-height: 66vh;
  object-fit: contain;
}
.object-art > span {
  color: #dbd3b3;
  font: 700 clamp(82px, 12vw, 180px) var(--serif);
  writing-mode: vertical-rl;
}
.object-text {
  padding: 6vw 7vw 5vw 5vw;
}
.object-text h1 {
  font-size: clamp(33px, 4.7vw, 76px);
  line-height: 1.18;
  margin: 16px 0;
}
.object-text .lede {
  font: 20px/1.85 var(--serif);
  margin: 18px 0;
}
.object-text h3 {
  margin: 32px 0 8px;
}
.related,
.source-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.related li {
  margin: 10px 0;
}
.related span {
  display: inline-block;
  min-width: 6em;
  margin-right: 12px;
  color: #76503f;
  font-size: 13px;
}
.source-list a,
.related a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.source-list small {
  display: block;
  margin: 7px 0 14px;
  color: #666f65;
}
.source-list {
  font-size: 14px;
}
.eyebrow {
  color: #81523c;
}
.fayol-stage {
  background: #cfccba;
  position: relative;
  min-height: min(780px, 84vw);
  overflow: hidden;
}
.fayol-manuscript {
  position: absolute;
  width: 36%;
  left: 0;
  top: -3%;
  transform: rotate(-5deg);
}
.fayol-bust {
  position: absolute;
  width: 26%;
  left: 25%;
  top: 21%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 7px 26px #2224;
}
.fayol-copy {
  margin-left: 55%;
  padding: 8% 5% 8% 0;
}
.fayol-copy h1 {
  font-size: clamp(67px, 8vw, 145px);
  line-height: 1.08;
  margin: 0.2em 0;
}
.fayol-copy p {
  line-height: 1.8;
}
.fayol-copy a {
  margin-top: 17px;
}
.industrial {
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  grid-template-areas: "head head" "photo caption" "book link" "people people";
  gap: 28px 5%;
  padding: 3.4vw 6vw 30px;
  background: #dbe0d4;
}
.industrial-head {
  grid-area: head;
  position: relative;
  padding-right: 23%;
  min-height: 100px;
}
.industrial-head h1 {
  font-size: clamp(37px, 5.7vw, 92px);
  letter-spacing: -0.05em;
}
.industrial-head span {
  position: absolute;
  right: 0;
  bottom: 0;
  font: italic clamp(65px, 9vw, 150px) / 1 Georgia;
  color: #385549;
  letter-spacing: -0.07em;
}
.industrial-head p,
.era-out > p:first-child {
  letter-spacing: 0.12em;
  font-size: 13px;
  color: #714631;
}
.factory-plate {
  grid-area: photo;
}
.factory-plate button {
  position: relative;
  width: 100%;
}
.factory-plate img {
  max-height: 370px;
  object-fit: cover;
}
.factory-plate span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 6px 10px;
  color: white;
  background: #25372c;
}
.factory-margin {
  grid-area: caption;
  align-self: center;
  max-width: 340px;
}
.factory-margin p,
.era-out p,
.branch p {
  font: 19px/1.8 var(--serif);
}
.factory-margin small {
  display: block;
  margin-top: 20px;
  color: #4e5e51;
}
.era-book {
  grid-area: book;
  height: 140px;
  overflow: hidden;
  background: #b6bdaa;
  text-align: right;
}
.era-book button {
  width: 50%;
  transform: rotate(-8deg);
  margin-top: -9px;
}
.era-out {
  grid-area: link;
  align-self: center;
}
.era-out a {
  font: 700 clamp(20px, 2.5vw, 44px) var(--serif);
}
.era-out p {
  margin: 0.4em 0;
  font-size: 16px;
}
.era-people {
  grid-area: people;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.trail-new {
  background: #263b35;
  color: #efe8ca;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.03fr 1fr 0.72fr;
  grid-template-areas: "q q paper" "left right paper" "foot foot foot";
  gap: 35px;
  padding: 5vw 6vw 3vw;
  min-height: 76vh;
}
.trail-question {
  grid-area: q;
}
.trail-question h1 {
  font-size: clamp(42px, 6.2vw, 100px);
  line-height: 1.13;
  margin: 13px 0 18px;
}
.trail-question > p:last-child {
  max-width: 46ch;
  line-height: 1.75;
  color: #d3dccb;
}
.trail-leaf {
  grid-area: paper;
  align-self: center;
  transform: rotate(7deg);
  box-shadow: 0 12px 25px #101c17aa;
}
.branch {
  padding: 16px 0;
  border-top: 2px solid #c8ad7e;
}
.branch a,
.branch button,
.branch small {
  display: block;
}
.branch a {
  font: 700 clamp(23px, 2.8vw, 48px) var(--serif);
  margin: 9px 0;
}
.branch button {
  color: #f2d3a5;
  font-size: 13px;
  margin: 14px 0;
}
.teaching-branch {
  grid-area: left;
}
.command-branch {
  grid-area: right;
}
.trail-new footer {
  grid-area: foot;
  display: flex;
  gap: 32px;
  font-size: 14px;
}
.network-v2 {
  padding: 3.5vw 6vw 5vw;
  background: #e8ece2;
  min-height: 85vh;
}
.network-v2 header,
.net-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.network-v2 h1 {
  font-size: clamp(31px, 4.2vw, 69px);
  margin: 6px 0 14px;
}
.network-v2 select,
.net-tools button {
  background: transparent;
  color: #283e34;
  font: 14px var(--sans);
  border: 0;
  border-bottom: 1px solid #829387;
  padding: 7px 2px;
}
.network-v2 label,
.net-tools small {
  font-size: 13px;
}
.net-tools {
  justify-content: flex-start;
  margin: 15px 0;
}
.net-tools button:disabled {
  opacity: 0.4;
}
.network-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(225px, 26%);
  gap: 4vw;
  align-items: center;
}
.net-chart {
  position: relative;
  height: clamp(310px, 28vw, 480px);
  background: #dce4d5;
  overflow: hidden;
}
.net-chart svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
.net-chart line {
  stroke: #7b8c7b;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.net-chart line.analytical_comparison {
  stroke: #ad6e52;
  stroke-dasharray: 5 5;
}
.net-chart line.selected {
  stroke: #7f482d;
  stroke-width: 3px;
}
.map-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  background: #dce4d5;
  text-align: center;
  padding: 4px 8px;
  max-width: 28%;
  line-height: 1.3;
}
.map-node b,
.map-node small {
  display: block;
}
.map-node b {
  font: 650 clamp(15px, 1.4vw, 25px) / 1.4 var(--serif);
}
.map-node small {
  font-size: 11px;
  color: #535e51;
}
.map-node.origin {
  border-bottom: 3px solid #445c4c;
}
.network-grid aside p {
  line-height: 1.8;
}
.network-grid aside h2 {
  margin: 6px 0 12px;
}
.network-grid aside a {
  color: #74472f;
}
.edge-list {
  margin-top: 22px;
}
.edge-list summary {
  cursor: pointer;
  font-size: 14px;
}
.edge-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 19px;
  margin-top: 12px;
}
.edge-list button {
  font-size: 13px;
  padding: 5px;
}
.edge-list button[aria-pressed="true"] {
  background: #304d42;
  color: #fff;
}
.edge-list small {
  display: block;
  font-size: 11px;
}
.credits {
  max-width: 920px;
  margin: auto;
  padding: 45px 6vw;
}
.credits h1 {
  font-size: 48px;
}
.credits li {
  margin: 18px 0;
}
.credits a {
  text-decoration: underline;
}
.site-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  background: #ebece3;
  color: #465a4d;
  padding: 15px 4vw;
  font-size: 13px;
}
.site-foot a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.net-chart line.edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}
.paint-credit {
  position: absolute;
  bottom: 2%;
  left: 7%;
  color: #fff8df;
  background: #321f23cc;
  padding: 3px 7px;
  font-size: clamp(9px, 0.9vw, 13px);
}
.open-art {
  height: 100%;
  display: grid;
  align-content: center;
  max-width: 100%;
  text-align: center;
}
.open-art small {
  display: block;
  color: #e9e7ce;
  padding: 8px 0;
  font-size: 12px;
}
.object-art .open-art img {
  max-height: min(57vh, 560px);
}
@media (max-width: 700px) {
  .object-art .open-art img {
    height: 151px;
  }
  .paint-name {
    bottom: 10%;
  }
}