.right-hand-page {
  --rh-green: #b7d69f;
}

.right-hand-page .desk-nav {
  width: min(1160px, calc(100% - 32px));
}

.rh-hero,
.rh-section,
.rh-retainer,
.rh-final {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
  position: relative;
}

.rh-hero {
  min-height: 670px;
  display: flex;
  align-items: center;
  padding: 145px 7% 85px 5%;
}

.rh-eyebrow {
  margin: 0;
  font: 10px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rh-hero > .rh-eyebrow {
  position: absolute;
  top: 127px;
  left: 5%;
  z-index: 1;
  padding: 10px 14px;
  background: var(--peach);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-3deg);
}

.rh-hero-copy {
  width: min(900px, 86%);
  padding: clamp(32px, 5vw, 58px);
  position: relative;
  z-index: 1;
  background: #fffefb;
  border: 1px solid var(--ink);
  box-shadow: 7px 8px 0 rgba(32, 33, 29, .18);
  transform: rotate(-.7deg);
}

.rh-hero h1 {
  max-width: 760px;
  margin-bottom: 21px;
  font-size: clamp(52px, 6vw, 80px);
  line-height: .91;
}

.rh-hero h1 em,
.rh-section h2 em,
.rh-pullquote em,
.rh-retainer h2 em,
.rh-about h2 em,
.rh-final h2 em {
  font-style: italic;
  font-weight: 400;
}

.rh-lede {
  max-width: 575px;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 25px;
}

.rh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.rh-hero-note {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 12%;
  width: 220px;
  min-height: 180px;
  padding: 23px;
  background: var(--blue);
  border: 1px solid var(--ink);
  box-shadow: 5px 6px 0 var(--ink);
  transform: rotate(4deg);
}

.rh-hero-note p {
  margin: 0;
  font: 500 29px/1.04 var(--serif);
}

.rh-note-doodle {
  position: absolute;
  right: 18px;
  bottom: 5px;
  font: 34px var(--serif);
  transform: rotate(-18deg);
}

.rh-section {
  padding: 70px 0 75px;
  scroll-margin-top: 95px;
}

.rh-section > .rh-eyebrow {
  margin-bottom: 25px;
}

.rh-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .65fr);
  gap: clamp(28px, 7vw, 90px);
  align-items: end;
  margin-bottom: 36px;
}

.rh-section h2,
.rh-retainer h2,
.rh-final h2 {
  font: 500 clamp(46px, 6.2vw, 78px)/.94 var(--serif);
  letter-spacing: -.045em;
  margin: 0;
}

.rh-section-intro > p,
.rh-about-copy > p,
.rh-retainer-copy > p:not(.rh-eyebrow),
.rh-final > p:not(.rh-eyebrow) {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.rh-work-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.rh-work-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 19px 0 23px;
  border-top: 1px solid var(--ink);
}

.rh-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  font: 10px var(--mono);
}

.rh-work-item:nth-child(2) .rh-number { background: var(--peach); }
.rh-work-item:nth-child(3) .rh-number { background: var(--blue); }
.rh-work-item:nth-child(4) .rh-number { background: var(--rh-green); }

.rh-work-item h3 {
  margin: 2px 0 11px;
  font: 500 28px/1 var(--serif);
  letter-spacing: -.025em;
}

.rh-work-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rh-work-item li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(32, 33, 29, .14);
  font-size: 14px;
}

.rh-work-item li::before {
  content: "↗";
  margin-right: 8px;
  font: 11px var(--mono);
}

.rh-pullquote {
  width: fit-content;
  max-width: 94%;
  margin: 30px auto 0;
  padding: 19px 30px 23px;
  background: var(--sun);
  border: 1px solid var(--ink);
  box-shadow: 5px 6px 0 var(--ink);
  text-align: center;
  transform: rotate(-1deg);
  font: 500 clamp(28px, 4vw, 45px)/1.05 var(--serif);
  letter-spacing: -.025em;
}

.rh-retainer {
  padding: clamp(32px, 5.5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(350px, 1fr);
  gap: clamp(35px, 6vw, 78px);
  background: var(--sun);
  border: 1px solid var(--ink);
  box-shadow: 8px 9px 0 var(--ink);
  transform: rotate(-.35deg);
  scroll-margin-top: 95px;
}

.rh-retainer-copy > .rh-eyebrow {
  margin-bottom: 27px;
}

.rh-retainer h2 {
  margin-bottom: 21px;
  font-size: clamp(45px, 5.2vw, 67px);
}

.rh-retainer-copy > p:not(.rh-eyebrow) {
  margin-top: 14px;
  max-width: 490px;
}

.rh-retainer-options h3,
.rh-fit h3 {
  margin: 0 0 13px;
  font: italic 500 27px/1 var(--serif);
}

.rh-retainer-options ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(32, 33, 29, .55);
}

.rh-retainer-options li {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) 1fr;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(32, 33, 29, .35);
  align-items: baseline;
}

.rh-retainer-options li strong {
  font: 500 19px/1.1 var(--serif);
}

.rh-retainer-options li span {
  font-size: 13px;
  line-height: 1.4;
}

.rh-retainer-note {
  margin: 16px 0 20px;
  max-width: 490px;
  font: 12px/1.45 var(--mono);
}

.rh-retainer-stamp {
  position: absolute;
  right: -17px;
  top: -25px;
  width: 72px;
  height: 72px;
  display: grid;
  place-content: center;
  border: 2px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  text-align: center;
  font: 8px/1.2 var(--mono);
  transform: rotate(11deg);
}

.rh-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr);
  gap: 22px 8%;
  align-items: start;
  padding-top: 100px;
  padding-bottom: 80px;
}

.rh-about > .rh-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.rh-about h2 {
  margin: 0 0 20px;
  font: 500 clamp(46px, 5.4vw, 68px)/.94 var(--serif);
  letter-spacing: -.045em;
}

.rh-about-copy > p + p {
  margin-top: 15px;
}

.rh-fit {
  padding: 22px 0 0;
}

.rh-fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.rh-fit-list li {
  padding: 12px 4px 12px 25px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}

.rh-fit-list li::before {
  content: "✳";
  position: absolute;
  left: 2px;
  top: 12px;
  font-size: 11px;
}

.rh-final {
  margin-top: 15px;
  margin-bottom: 75px;
  padding: clamp(32px, 6vw, 72px);
  background: var(--peach);
  border: 1px solid var(--ink);
  box-shadow: 8px 9px 0 var(--ink);
  scroll-margin-top: 100px;
}

.rh-final > .rh-eyebrow {
  margin-bottom: 25px;
}

.rh-final h2 {
  max-width: 780px;
  margin-bottom: 20px;
}

.rh-final > p:not(.rh-eyebrow) {
  max-width: 640px;
  margin-bottom: 25px;
}

.rh-footer {
  width: min(1160px, calc(100% - 40px));
  margin: auto;
}

.rh-footer > div {
  display: flex;
  gap: 24px;
}

.rh-footer a { text-decoration: none; }
.rh-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 761px) and (max-width: 1024px) {
  .rh-hero { padding-inline: 3%; }
  .rh-hero-copy { width: 84%; padding: 43px; }
  .rh-hero-note { right: 1%; width: 195px; }
  .rh-retainer { grid-template-columns: minmax(0, .8fr) minmax(300px, 1fr); gap: 35px; }
}

@media (max-width: 760px) {
  .right-hand-page .desk-nav { width: calc(100% - 18px); }
  .right-hand-page .nav-links { gap: 9px; }
  .right-hand-page .nav-links a { font-size: 8px; }
  .right-hand-page .nav-links a[href="../../index.html#about"],
  .right-hand-page .nav-links a[href="../../index.html#projects"],
  .right-hand-page .nav-links a[href="../../index.html#exploring"] { display: none; }

  .rh-hero,
  .rh-section,
  .rh-retainer,
  .rh-final,
  .rh-footer { width: calc(100% - 28px); }

  .rh-hero {
    min-height: 680px;
    display: block;
    padding: 147px 0 110px;
  }

  .rh-hero > .rh-eyebrow { top: 112px; left: 3%; font-size: 9px; }
  .rh-hero-copy { width: 96%; padding: 33px 22px 36px; margin-top: 10px; }
  .rh-hero h1 { font-size: clamp(46px, 11.5vw, 65px); }
  .rh-lede { font-size: 16px; }
  .rh-hero-note { right: 4%; bottom: 17px; width: 178px; min-height: 135px; padding: 16px; }
  .rh-hero-note p { font-size: 22px; }
  .rh-note-doodle { font-size: 25px; }

  .rh-section { padding: 55px 0 60px; }
  .rh-section-intro { display: block; margin-bottom: 26px; }
  .rh-section h2,
  .rh-final h2 { font-size: clamp(43px, 10.5vw, 64px); }
  .rh-section-intro > p { margin-top: 15px; }
  .rh-work-list { grid-template-columns: 1fr; gap: 0; }
  .rh-work-item { grid-template-columns: 40px 1fr; gap: 8px; padding-block: 16px 19px; }
  .rh-work-item h3 { font-size: 26px; }
  .rh-pullquote { max-width: 94%; margin-top: 24px; padding: 17px 14px 20px; font-size: clamp(25px, 7vw, 35px); }

  .rh-retainer { display: block; padding: 30px 21px; margin-block: 15px 25px; }
  .rh-retainer h2 { font-size: clamp(43px, 10vw, 60px); }
  .rh-retainer-options { margin-top: 27px; }
  .rh-retainer-options li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .rh-retainer-stamp { width: 62px; height: 62px; right: -7px; top: -20px; font-size: 7px; }

  .rh-about { display: flex; flex-direction: column; align-items: stretch; gap: 17px; padding-top: 63px; padding-bottom: 55px; }
  .rh-about h2 { font-size: clamp(43px, 10.5vw, 64px); }
  .rh-fit { padding-top: 7px; }
  .rh-fit h3 { font-size: 25px; }

  .rh-final { margin-top: 10px; margin-bottom: 55px; padding: 31px 22px; }
  .rh-final > .rh-eyebrow { margin-bottom: 20px; }
  .rh-actions { gap: 15px; }
  .rh-footer { align-items: flex-start; gap: 12px; flex-direction: column; }
}

@media (max-width: 420px) {
  .right-hand-page .nav-links { gap: 7px; }
  .right-hand-page .nav-links a { font-size: 7px; }
  .right-hand-page .availability { display: none; }
  .rh-hero { min-height: 715px; }
  .rh-hero-copy { padding-inline: 19px; }
  .rh-actions { gap: 13px; }
}