:root {
  --kr-ground: #E0F1E0;
  --kr-ink: #282A24;
  --kr-copper: #AF591F;
  --kr-support: #E0E5DD;
  --kr-white: #FFFFFF;
  --kr-hand: 'Grape Nuts', 'Segoe Print', cursive;
  --kr-reading: 'Quicksand', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 28px; }
body { margin: 0; color: var(--kr-ink); background: var(--kr-white); font: 500 18px/1.8 var(--kr-reading); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--kr-copper); }
a:focus-visible { outline: 3px solid var(--kr-copper); outline-offset: 6px; }
::selection { background: var(--kr-ground); color: var(--kr-ink); }
.kr-skip { position: absolute; left: 24px; top: -100px; padding: 12px 20px; z-index: 5; background: var(--kr-white); }
.kr-skip:focus { top: 12px; }
.kr-glyph { display: inline-block; width: 21px; height: 21px; flex: 0 0 21px; vertical-align: -.2em; stroke-width: 1.6; }

/* The caption's last link shares the name’s first baseline, rather than a top rail. */
.kr-masthead {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 29px 29px auto;
  align-items: baseline;
  padding: 25px 48px 32px;
  column-gap: 24px;
}
.kr-caption-nav, .kr-name { display: contents; }
.kr-caption-nav a { grid-column: 1; justify-self: start; font-size: 17px; line-height: 29px; }
.kr-caption-nav .kr-glyph { width: 18px; height: 18px; margin-right: 12px; color: var(--kr-copper); }
.kr-caption-nav a:nth-child(1) { grid-row: 1; }
.kr-caption-nav a:nth-child(2) { grid-row: 2; }
.kr-caption-nav a:nth-child(3) { grid-row: 3; }
.kr-caption-nav [aria-current='page'] { text-decoration-thickness: 2px; }
.kr-name { text-decoration: none; }
.kr-name span { grid-column: 2; font: 400 clamp(72px, 7.6vw, 114px)/.86 var(--kr-hand); }
.kr-name span:first-child { grid-row: 3; }
.kr-name:focus-visible span { outline: 3px solid var(--kr-copper); outline-offset: 4px; }
.kr-name:hover span { color: var(--kr-copper); }

/* A portrait and an opaque mint field are separate pieces of the opening. */
.kr-opening { display: grid; grid-template-columns: 30% 1fr; min-height: 738px; }
.kr-opening-photo { margin: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--kr-white); }
.kr-opening-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 50%; border-radius: 20px; background: var(--kr-support); }
.kr-opening-photo figcaption { padding: 18px 28px 20px; font-size: 16px; line-height: 1.55; }
.kr-opening-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .42fr);
  grid-template-rows: auto minmax(250px, 1fr);
  gap: 36px;
  min-width: 0;
  padding: 42px 48px 48px;
  background: var(--kr-ground);
}
.kr-opening h1 { grid-column: 1 / -1; grid-row: 1; justify-self: end; max-width: 850px; margin-bottom: 0; text-align: right; text-wrap: balance; font: 400 clamp(64px, 6.2vw, 94px)/1.03 var(--kr-hand); }
.kr-opening-lead { grid-column: 1; grid-row: 2; align-self: end; width: min(100%, 37ch); margin: 0; padding: 23px 25px; background: var(--kr-white); font-size: 18px; line-height: 1.75; }
.kr-comma { grid-column: 2; grid-row: 2; justify-self: center; align-self: start; width: 196px; height: 229px; margin-top: 4px; }
.kr-comma img { width: 100%; height: 100%; }

/* Unboxed reading measures, with the heading and its mark hanging into the margin. */
.kr-essay { position: relative; max-width: 850px; margin: 0 auto; padding: 96px 64px; }
.kr-essay-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 26px; width: calc(100% + 98px); margin-left: -98px; margin-bottom: 30px; align-items: start; }
.kr-essay-heading > .kr-glyph { width: 28px; height: 28px; margin-top: 18px; color: var(--kr-copper); }
.kr-essay h2 { margin-bottom: 0; font: 400 clamp(44px, 4.7vw, 68px)/1.06 var(--kr-hand); text-wrap: balance; }
.kr-essay p { margin-bottom: 25px; }
.kr-essay p:last-child { margin-bottom: 0; }
.kr-essay a { color: var(--kr-copper); }
.kr-essay a:hover { color: var(--kr-ink); }
.kr-home > .kr-essay:first-of-type > p:first-of-type::first-letter { float: left; margin: 6px 12px 0 0; color: var(--kr-copper); font: 400 96px/.78 var(--kr-hand); }
.kr-pause { position: relative; margin: 0 0 12px; padding: 66px 48px; background: var(--kr-copper); color: var(--kr-white); }
.kr-pause::before { content: ''; position: absolute; top: -76px; left: max(30px, calc(50% - 580px)); width: 140px; height: 164px; background: url('low-comma.svg') center / contain no-repeat; }
.kr-pause p { max-width: 780px; margin: 0 auto 18px; font-size: clamp(20px, 1.85vw, 27px); line-height: 1.65; }
.kr-pause p:last-child { margin-bottom: 0; }
.kr-home > .kr-essay:last-child { padding-top: 14px; padding-bottom: 108px; }

/* Interior photographs sit lower than the title and hang out of the mint header. */
.kr-inner-front { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; padding: 48px 56px 64px; background: var(--kr-ground); }
.kr-inner-intro { min-width: 0; }
.kr-trail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; font-size: 16px; line-height: 1.6; }
.kr-trail span { max-width: 100%; }
.kr-inner-intro h1 { max-width: 1000px; margin-bottom: 28px; font: 400 clamp(52px, 5.25vw, 78px)/1.07 var(--kr-hand); text-wrap: balance; }
.kr-inner-intro .kr-lead { max-width: 57ch; margin-bottom: 0; font-size: 19px; line-height: 1.8; }
.kr-band { position: relative; align-self: end; min-width: 0; margin: 90px 0 -116px; background: var(--kr-white); }
.kr-band img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 20px; background: var(--kr-support); }
.kr-band[data-photo-slot="research"] img { object-position: 55% 50%; }
.kr-band[data-photo-slot="about"] img { object-position: 42% 50%; }
.kr-band figcaption { padding: 17px 23px 19px; font-size: 16px; line-height: 1.6; }
.kr-inner-front--type { display: block; padding: 58px max(48px, calc((100vw - 1040px) / 2)) 74px; }
.kr-inner-front--type::after { content: ''; position: absolute; right: 7%; bottom: -43px; width: 112px; height: 131px; background: url('low-comma.svg') center / contain no-repeat; }
.kr-inner-body { padding-top: 74px; }
.kr-inner-body .kr-essay { padding-top: 62px; padding-bottom: 0; }
.kr-inner-body .kr-essay:last-child { padding-bottom: 108px; }

.kr-guide-index { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; padding: 62px max(48px, calc((100vw - 1180px) / 2)) 66px; background: var(--kr-support); }
.kr-guide-index h2 { max-width: 360px; margin-bottom: 0; font: 400 58px/1.06 var(--kr-hand); }
.kr-guide-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; align-content: start; }
.kr-guide-links a { display: flex; align-items: baseline; gap: 12px; min-height: 64px; padding: 13px 0 16px; border-bottom: 1px solid var(--kr-ink); font-size: 18px; line-height: 1.6; }
.kr-guide-links .kr-glyph { align-self: start; margin-top: 4px; color: var(--kr-copper); }
.kr-footer { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 26px 64px; padding: 38px 48px 32px; background: var(--kr-white); }
.kr-footer p { max-width: 63ch; margin-bottom: 0; font-size: 16px; }
.kr-footer nav { display: flex; flex-wrap: wrap; gap: 12px 25px; font-size: 16px; }
.kr-copyright { grid-column: 1 / -1; }
.kr-error { min-height: 440px; padding: 65px max(48px, calc((100vw - 1040px) / 2)); background: var(--kr-ground); }
.kr-error h1 { margin-bottom: 28px; font: 400 86px/1.06 var(--kr-hand); }
.kr-error p { max-width: 50ch; }

@media (min-width: 1700px) {
  .kr-opening { min-height: 820px; }
  .kr-opening-field { padding-left: 76px; padding-right: 76px; }
  .kr-comma { width: 222px; height: 259px; }
  .kr-inner-front { padding-left: max(56px, calc((100vw - 1480px) / 2)); padding-right: max(56px, calc((100vw - 1480px) / 2)); }
}
@media (max-width: 1000px) and (min-width: 601px) {
  .kr-masthead { grid-template-columns: 38% 1fr; padding-left: 26px; padding-right: 26px; }
  .kr-caption-nav a { font-size: 16px; }
  .kr-caption-nav .kr-glyph { margin-right: 8px; }
  .kr-name span { font-size: clamp(62px, 8vw, 80px); }
  .kr-opening-field { grid-template-columns: minmax(0, 1fr) 120px; gap: 26px 20px; padding: 32px 28px; }
  .kr-opening h1 { font-size: 64px; }
  .kr-opening-lead { padding: 20px; }
  .kr-comma { width: 120px; height: 140px; }
  .kr-essay { max-width: 770px; padding-left: 66px; padding-right: 50px; }
  .kr-essay-heading { width: calc(100% + 44px); margin-left: -44px; gap: 14px; grid-template-columns: 30px minmax(0, 1fr); }
  .kr-inner-front { gap: 30px; padding: 40px 30px 60px; }
  .kr-inner-intro h1 { font-size: 58px; }
  .kr-inner-front--photo .kr-lead { font-size: 18px; }
  .kr-band { margin-top: 68px; margin-bottom: -110px; }
  .kr-band img { aspect-ratio: 8 / 5; }
  .kr-inner-front--type { padding-left: 64px; padding-right: 64px; }
  .kr-guide-index { gap: 36px; padding-left: 30px; padding-right: 30px; }
  .kr-guide-links { grid-template-columns: 1fr; }
  .kr-guide-index h2 { font-size: 50px; }
}
@media (max-width: 600px) {
  body { font-size: 18px; line-height: 1.75; }
  .kr-masthead { display: flex; flex-direction: column; gap: 20px; padding: 24px 22px 25px; }
  .kr-name { order: 0; display: block; }
  .kr-name span { display: block; font-size: clamp(64px, 17.6vw, 84px); line-height: .94; }
  .kr-caption-nav { order: 1; display: flex; flex-direction: column; width: 100%; }
  .kr-caption-nav a { display: block; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--kr-support); font-size: 16px; line-height: 1.6; }
  .kr-caption-nav .kr-glyph { margin-right: 12px; }
  .kr-opening { display: flex; flex-direction: column; min-height: 0; background: var(--kr-ground); }
  .kr-opening-field { display: contents; }
  .kr-opening h1 { order: 0; width: auto; max-width: none; margin: 30px 22px 26px; text-align: left; font-size: clamp(48px, 13.6vw, 66px); line-height: 1.04; }
  .kr-opening-lead { order: 1; align-self: stretch; width: auto; margin: 0 22px 32px; padding: 21px; font-size: 17px; line-height: 1.75; }
  .kr-opening-photo { order: 2; display: block; margin: 0 22px; }
  .kr-opening-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-position: 50% 50%; object-fit: cover; }
  .kr-opening-photo figcaption { padding: 16px 18px 18px; }
  .kr-comma { order: 3; width: 90px; height: 105px; margin: 30px 30px 38px auto; align-self: auto; }
  .kr-essay { width: 100%; padding: 62px 22px; }
  .kr-essay-heading { display: block; width: auto; margin: 0 0 27px; }
  .kr-essay-heading > .kr-glyph { width: 26px; height: 26px; margin: 0 0 14px; }
  .kr-essay h2 { font-size: 45px; line-height: 1.1; }
  .kr-essay p { margin-bottom: 23px; }
  .kr-home > .kr-essay:first-of-type > p:first-of-type::first-letter { font-size: 86px; }
  .kr-pause { padding: 45px 22px; margin-bottom: 0; }
  .kr-pause::before { top: -38px; left: auto; right: 25px; width: 72px; height: 84px; }
  .kr-pause p { font-size: 20px; line-height: 1.7; margin-bottom: 20px; }
  .kr-home > .kr-essay:last-child { padding-top: 4px; padding-bottom: 70px; }
  .kr-inner-front { display: block; padding: 30px 22px 40px; }
  .kr-trail { gap: 8px; font-size: 16px; margin-bottom: 25px; }
  .kr-inner-intro h1 { font-size: clamp(47px, 12.8vw, 64px); line-height: 1.08; margin-bottom: 25px; }
  .kr-inner-intro .kr-lead { font-size: 18px; line-height: 1.75; }
  .kr-band { margin: 34px 0 -70px; }
  .kr-band img { aspect-ratio: 5 / 3; }
  .kr-band figcaption { padding: 15px 18px 17px; font-size: 16px; }
  .kr-inner-front--type::after { content: none; }
  .kr-inner-body { padding-top: 44px; }
  .kr-inner-body .kr-essay { padding-top: 44px; }
  .kr-inner-body .kr-essay:last-child { padding-bottom: 70px; }
  .kr-guide-index { display: block; padding: 39px 22px 42px; }
  .kr-guide-index h2 { max-width: 300px; margin-bottom: 28px; font-size: 46px; }
  .kr-guide-links { grid-template-columns: 1fr; gap: 3px; }
  .kr-guide-links a { min-height: 58px; padding: 13px 0; }
  .kr-footer { display: flex; flex-direction: column; gap: 25px; padding: 31px 22px 30px; }
  .kr-footer nav { gap: 17px 22px; }
  .kr-error { padding: 42px 22px; }
  .kr-error h1 { font-size: 60px; }
}

/* The dealt comma and every other ornament stay still. No reveal hides the words. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}