:root {
  --lip-ground: #3DBDBD;
  --lip-ink: #222727;
  --lip-accent: #BC3535;
  --lip-support: #E4E7E7;
  --lip-surface: #FFFFFF;
  --lip-wide: 1180px;
  --lip-reading: 660px;
  --lip-display: "Oswald", "Arial Narrow", sans-serif;
  --lip-text: "IM Fell English", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 28px; }
body { margin: 0; background: var(--lip-surface); color: var(--lip-ink); font: 22px/1.55 var(--lip-text); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .19em; }
a:hover { color: var(--lip-accent); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--lip-accent); outline-offset: 6px; }
::selection { color: var(--lip-surface); background: var(--lip-accent); }
img { max-width: 100%; }
.lip-skip { position: absolute; z-index: 5; top: 12px; left: 18px; padding: 12px 20px; background: var(--lip-surface); color: var(--lip-ink); transform: translateY(-200%); }
.lip-skip:focus { transform: none; }

/* The two axes are the masthead itself, rather than a utility navigation bar. */
.lip-mast { width: min(var(--lip-wide), calc(100% - 64px)); margin: 24px auto 0; display: grid; grid-template-columns: 46% 54%; }
.lip-name { position: relative; display: flex; align-items: center; padding: 22px 34px; background: var(--lip-ground); }
.lip-name::after { content: ""; position: absolute; right: 0; bottom: 0; width: 74px; height: 96px; background: var(--lip-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 32% 100%, 0 76%); pointer-events: none; }
.lip-name a { position: relative; z-index: 1; display: inline-block; color: var(--lip-ink); text-decoration: none; font: 500 84px/.96 var(--lip-display); letter-spacing: -.035em; }
.lip-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .09em; }
.lip-name a:focus-visible { outline-color: var(--lip-ink); }
.lip-name-line { display: block; }
.lip-name-stop { color: var(--lip-accent); font-size: 1.35em; line-height: 0; }
.lip-contents { display: grid; grid-template-columns: 1fr; padding-left: 34px; }
.lip-topic { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 2px 16px; min-height: 58px; padding: 5px 10px 7px 0; border-bottom: 1px solid var(--lip-support); text-decoration: none; }
.lip-topic:first-child { border-top: 2px solid var(--lip-ink); }
.lip-topic:last-child { border-bottom: 2px solid var(--lip-ink); }
.lip-topic-title { grid-column: 2; font: 400 24px/1.12 var(--lip-display); }
.lip-topic-detail { grid-column: 2; font-size: 17px; line-height: 1.15; }
.lip-topic i, .lip-topic svg { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; stroke-width: 1.6; color: var(--lip-accent); }
.lip-topic:hover { color: var(--lip-ink); background: var(--lip-support); }
.lip-topic:hover .lip-topic-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .13em; }
.lip-topic[aria-current="page"] { border-bottom-color: var(--lip-accent); border-bottom-width: 3px; }

/* Every letter is on white; the separate panoramic beat has no overlay. */
.lip-opening { width: min(var(--lip-wide), calc(100% - 64px)); margin: 32px auto 30px; }
.lip-breadcrumb { font-size: 17px; margin-bottom: 24px; line-height: 1.3; }
.lip-breadcrumb ol { display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 8px; list-style: none; }
.lip-breadcrumb li + li::before { content: "/"; padding-right: 8px; color: var(--lip-accent); }
h1 { font: 500 clamp(48px, 5.5vw, 78px)/1.06 var(--lip-display); letter-spacing: -.025em; margin: 0 0 22px; max-width: var(--lip-wide); text-wrap: balance; }
.lip-home h1 { font-size: clamp(52px, 6.15vw, 88px); line-height: 1.02; margin-bottom: 18px; }
.lip-lead { max-width: 1120px; font-size: 24px; line-height: 1.38; }
.lip-lead p { margin: 0; }
.lip-photo { margin: 0; }
.lip-photo-field { background: var(--lip-ground); }
.lip-photo img { display: block; width: min(var(--lip-wide), calc(100% - 64px)); height: 230px; margin: 0 auto; object-fit: cover; object-position: center; background: var(--lip-support); color: var(--lip-ink); font-size: 17px; }
.lip-photo--inside img { height: 185px; object-fit: contain; background: var(--lip-ground); }
.lip-photo figcaption { width: min(var(--lip-wide), calc(100% - 64px)); margin: 0 auto; padding-top: 10px; font-size: 16px; line-height: 1.35; }

/* A single 660px essay, interrupted by sentences hanging in the open right half. */
.lip-reading { width: min(var(--lip-wide), calc(100% - 64px)); margin: 78px auto 94px; }
.lip-run { margin: 0; }
h2 { font: 400 48px/1.1 var(--lip-text); letter-spacing: -.015em; max-width: var(--lip-reading); margin: 0 0 30px; text-wrap: balance; }
.lip-passage { display: grid; grid-template-columns: minmax(0, var(--lip-reading)) minmax(0, 1fr); gap: 0 96px; align-items: start; }
.lip-sentence { grid-column: 1; margin: 0 0 26px; font-size: 23px; line-height: 1.58; }
.lip-run > .lip-passage:first-of-type > .lip-sentence::first-letter { font-size: 1.3em; }
.lip-crosshead { position: relative; grid-column: 2; grid-row: 1; margin: 8px 0 0 -24px; padding: 19px 0 8px; color: var(--lip-accent); font: 400 43px/1.13 var(--lip-display); letter-spacing: -.018em; max-width: 410px; text-wrap: balance; }
.lip-crosshead::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 4px; background: var(--lip-accent); }
.lip-break { display: flex; align-items: center; gap: 18px; margin: 58px 0 64px; height: 44px; }
.lip-break::before, .lip-break::after { content: ""; display: block; height: 2px; background: var(--lip-ink); }
.lip-break::before { flex: 3; }
.lip-break::after { flex: 2; }
.lip-break span { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--lip-accent); flex-shrink: 0; }

/* This comparison can spread beyond the reading measure without becoming another essay. */
.lip-table-passage { width: 100%; margin: 32px 0 42px; }
.lip-table-passage table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: 21px; line-height: 1.4; }
.lip-table-passage caption { text-align: left; font: italic 400 37px/1.15 var(--lip-text); padding: 0 0 23px; max-width: var(--lip-reading); }
.lip-table-passage th, .lip-table-passage td { padding: 23px 22px; vertical-align: top; overflow-wrap: break-word; }
.lip-table-passage thead th { background: var(--lip-ground); color: var(--lip-ink); font: 400 25px/1.2 var(--lip-display); }
.lip-table-passage tbody tr { border-bottom: 2px solid var(--lip-support); }
.lip-table-passage tbody tr:last-child { border-bottom-color: var(--lip-ink); }
.lip-table-passage tbody th { color: var(--lip-accent); font: 400 27px/1.2 var(--lip-display); padding-left: 0; }
.lip-next { margin-top: 74px; padding: 30px 0 0; border-top: 3px solid var(--lip-ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 76px; }
.lip-next h2 { grid-column: 1 / -1; font: italic 400 27px/1.25 var(--lip-text); margin: 0; }
.lip-next a { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding: 0 0 18px; border-bottom: 2px solid var(--lip-accent); font: 400 33px/1.25 var(--lip-display); text-decoration: none; }
.lip-next a span { max-width: 440px; }
.lip-next i, .lip-next svg { flex-shrink: 0; width: 30px; height: 30px; margin-top: 7px; stroke-width: 1.6; color: var(--lip-accent); }
.lip-next a:hover { text-decoration: underline; text-underline-offset: .15em; }

.lip-bottom { position: relative; background: var(--lip-ground); }
.lip-bottom::before { content: ""; position: absolute; top: -28px; right: max(32px, calc((100% - var(--lip-wide)) / 2)); width: 112px; height: 56px; background: var(--lip-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%); pointer-events: none; }
.lip-bottom-inner { max-width: var(--lip-wide); width: calc(100% - 64px); margin: 0 auto; padding: 56px 0 30px; display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 20px 96px; }
.lip-last-words { grid-column: 1; font: 400 98px/1.02 var(--lip-display); letter-spacing: -.03em; margin: 0 0 15px; max-width: 650px; text-wrap: balance; }
.lip-bottom-nav { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr; align-content: start; gap: 9px; font-size: 20px; }
.lip-bottom-nav a { padding: 5px 0; text-decoration: none; border-bottom: 1px solid var(--lip-ink); }
.lip-bottom a:hover { color: var(--lip-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.lip-bottom a:focus-visible { outline-color: var(--lip-ink); }
.lip-disclaimer { margin: 0; max-width: 590px; font-size: 22px; line-height: 1.45; }
.lip-copyright { grid-column: 1 / -1; font-size: 16px; margin: 30px 0 0; }
.lip-endbar { height: 16px; background: var(--lip-accent); }

@media (max-width: 1190px) {
  .lip-mast { grid-template-columns: 43% 57%; }
  .lip-name { padding-inline: 24px; }
  .lip-name a { font-size: 66px; }
  .lip-name::after { width: 54px; height: 78px; }
  .lip-contents { padding-left: 26px; }
  .lip-passage { grid-template-columns: minmax(0, 60%) minmax(0, 1fr); gap: 0 66px; }
  .lip-crosshead { font-size: 36px; margin-left: -16px; }
  .lip-bottom-inner { gap: 20px 56px; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
  .lip-last-words { font-size: 80px; }
}

@media (max-width: 1000px) {
  .lip-passage { display: block; max-width: 660px; }
  .lip-crosshead { max-width: 600px; margin: 8px 0 36px 28px; padding: 16px 0 0; font-size: 35px; }
  .lip-name a { font-size: clamp(38px, 5.9vw, 60px); }
  .lip-name { padding-inline: 20px; }
  .lip-name::after { width: 38px; height: 62px; }
  .lip-topic { grid-template-columns: 26px minmax(0, 1fr); gap: 3px 12px; }
  .lip-topic-title { font-size: 22px; }
  .lip-topic-detail { font-size: 16px; }
  .lip-topic i, .lip-topic svg { width: 24px; height: 24px; }
  .lip-reading { margin-top: 60px; }
  h2 { font-size: 43px; }
  .lip-next { gap: 22px 38px; }
  .lip-next a { font-size: 29px; }
  .lip-table-passage table { font-size: 19px; }
  .lip-table-passage th, .lip-table-passage td { padding: 18px 14px; }
  .lip-table-passage thead th { font-size: 21px; }
  .lip-table-passage tbody th { font-size: 23px; }
}

@media (max-width: 620px) {
  body { font-size: 20px; }
  .lip-mast { width: calc(100% - 36px); margin-top: 12px; display: block; }
  .lip-name { min-height: 106px; padding: 12px 20px; }
  .lip-name a { font-size: 46px; line-height: .96; letter-spacing: -.025em; }
  .lip-name::after { width: 48px; height: 58px; }
  .lip-contents { padding: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .lip-topic { min-height: 76px; gap: 3px 7px; padding: 8px 0; grid-template-columns: 19px minmax(0, 1fr); }
  .lip-topic:first-child { border-top: 0; }
  .lip-topic:last-child { border-bottom: 1px solid var(--lip-support); }
  .lip-topic-title { font-size: 19px; line-height: 1.12; }
  .lip-topic-detail { font-size: 15.5px; line-height: 1.18; }
  .lip-topic i, .lip-topic svg { width: 18px; height: 18px; }
  .lip-opening { width: calc(100% - 36px); margin: 24px auto 26px; }
  h1, .lip-home h1 { font-size: clamp(36px, 10.25vw, 48px); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 16px; }
  .lip-home .lip-opening { margin-top: 20px; margin-bottom: 22px; }
  .lip-lead { font-size: 20px; line-height: 1.36; }
  .lip-breadcrumb { font-size: 16px; margin-bottom: 20px; }
  .lip-photo img { width: calc(100% - 36px); height: 160px; }
  .lip-photo--inside img { height: 128px; object-fit: cover; }
  .lip-photo[data-photo-key="courtyard-footing"] img { object-position: right center; }
  .lip-photo figcaption { width: calc(100% - 36px); font-size: 16px; padding-top: 9px; }
  .lip-reading { width: calc(100% - 36px); margin: 48px auto 70px; }
  h2 { font-size: 36px; line-height: 1.12; margin-bottom: 25px; }
  .lip-sentence { font-size: 21px; line-height: 1.55; margin-bottom: 24px; }
  .lip-crosshead { font-size: 31px; line-height: 1.18; margin: 5px 0 32px 22px; padding-top: 17px; max-width: calc(100% - 22px); }
  .lip-crosshead::before { width: 48px; height: 3px; }
  .lip-break { margin: 35px 0 40px; gap: 12px; height: 30px; }
  .lip-break span { width: 30px; height: 30px; }
  .lip-break::before { flex: 3; }
  .lip-break::after { flex: 1; }
  .lip-table-passage { margin: 25px 0 30px; }
  .lip-table-passage caption { font-size: 30px; padding-bottom: 19px; }
  .lip-table-passage table, .lip-table-passage tbody, .lip-table-passage tr { display: block; }
  .lip-table-passage thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lip-table-passage tbody tr { padding: 18px 0 22px; }
  .lip-table-passage tbody tr:first-child { border-top: 6px solid var(--lip-ground); }
  .lip-table-passage tbody th, .lip-table-passage td { display: block; padding: 12px 0 0; font-size: 20px; }
  .lip-table-passage tbody th { padding-top: 0; font-size: 29px; }
  .lip-table-passage td::before { content: attr(data-label); display: block; font: 400 21px/1.4 var(--lip-display); margin-bottom: 4px; }
  .lip-next { margin-top: 42px; gap: 26px; grid-template-columns: minmax(0, 1fr); }
  .lip-next h2 { font-size: 25px; }
  .lip-next a { font-size: 28px; padding-bottom: 16px; gap: 16px; }
  .lip-next i, .lip-next svg { width: 26px; height: 26px; margin-top: 4px; }
  .lip-bottom::before { right: 18px; width: 74px; height: 44px; top: -22px; }
  .lip-bottom-inner { width: calc(100% - 36px); padding: 36px 0 26px; display: block; }
  .lip-last-words { font-size: 65px; line-height: 1.03; margin-bottom: 24px; text-wrap: initial; }
  .lip-bottom-nav { margin: 28px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; font-size: 18px; }
  .lip-disclaimer { font-size: 20px; }
  .lip-copyright { margin-top: 28px; font-size: 16px; }
  .lip-endbar { height: 12px; }
}

/* The dealt ornaments stay still, including when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}