:root {
  --ordinary-ground: #fee0f8;
  --ordinary-ink: #1f2b1b;
  --ordinary-accent: #6e265b;
  --ordinary-support: #dcc4bb;
  --ordinary-gutter: max(40px, calc((100vw - 1120px) / 2));
  --ordinary-serif: 'Habibi', Georgia, serif;
  --ordinary-sans: 'Khula', 'Arial', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--ordinary-ground); color: var(--ordinary-ink); font: 20px/1.6 var(--ordinary-sans); }
::selection { color: var(--ordinary-ground); background: var(--ordinary-accent); }
a { color: var(--ordinary-accent); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: background-color 160ms, color 160ms, text-decoration-thickness 160ms; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ordinary-accent); outline-offset: 5px; border-radius: 5px; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, dt { font-family: var(--ordinary-serif); font-weight: 400; }
h1, h2, h3 { text-wrap: balance; }
svg { display: block; }
[data-lucide] { display: inline-flex; width: 22px; height: 22px; flex: none; vertical-align: middle; }
i[data-lucide] > svg { width: 100%; height: 100%; }
.ord-skip { position: absolute; z-index: 10; left: 20px; top: 8px; padding: 6px 12px; background: var(--ordinary-ground); transform: translateY(-180%); }
.ord-skip:focus { transform: translateY(0); }

/* The running head steps left; its large open indents are the site's signature. */
.ord-running-head { position: relative; height: 124px; padding: 10px 32px 14px; display: flex; flex-direction: column; align-items: flex-end; }
.ord-wordmark { display: block; font: 31px/1.25 var(--ordinary-serif); color: var(--ordinary-ink); text-decoration: none; white-space: nowrap; }
.ord-wordmark:hover { color: var(--ordinary-accent); text-decoration: none; }
.ord-head-links { display: flex; flex-direction: column; align-items: flex-end; padding-top: 6px; font-size: 15px; line-height: 1.3; }
.ord-head-line { display: flex; align-items: center; gap: 18px; min-height: 21px; }
.ord-head-line:nth-child(2) { padding-right: 34px; }
.ord-head-line:nth-child(3) { padding-right: 68px; }
.ord-head-links a { color: var(--ordinary-ink); text-decoration: none; padding: 0 3px; border-radius: 5px; }
.ord-head-links a:hover { color: var(--ordinary-ground); background: var(--ordinary-accent); }
.ord-head-links a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--ordinary-accent); text-decoration-thickness: 2px; }
.ord-head-links [data-lucide] { height: 14px; width: 14px; }
.ord-head-with-icon { display: flex; gap: 6px; align-items: center; }
.ord-running-head > .ord-open-indents { left: var(--ordinary-gutter); top: 21px; width: 80px; height: 80px; }
.ord-running-head > .ord-open-indents i { width: 80px; height: 72px; border-width: 4px; }
.ord-running-head > .ord-open-indents i:nth-child(2) { left: 20px; width: 60px; height: 50px; }
.ord-running-head > .ord-open-indents i:nth-child(3) { left: 40px; width: 40px; height: 28px; }

/* A solid cloth band runs across a full-bleed scene, with a stepped hem. */
.ord-opening { isolation: isolate; background: var(--ordinary-support) url('windbreak-repair.webp') center 41% / cover no-repeat; }
.ord-exposure-upper { height: 110px; }
.ord-title-band { position: relative; background: var(--ordinary-ground); padding: 28px var(--ordinary-gutter) 32px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 54px) calc(100% - 22px), calc(100% - 54px) 100%, 0 100%); }
.ord-title-band::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--ordinary-accent); }
.ord-title-band::after { content: ''; position: absolute; right: 34px; top: 27px; width: 45px; height: 66px; border-left: 4px solid var(--ordinary-accent); border-bottom: 4px solid var(--ordinary-accent); border-bottom-left-radius: 5px; box-shadow: -12px 12px 0 -8px var(--ordinary-ground), -17px 17px 0 -8px var(--ordinary-accent); }
.ord-title-band h1 { max-width: 970px; font-size: clamp(50px, 4.9vw, 70px); line-height: 1.12; letter-spacing: -1.7px; margin: 0 0 15px; }
.ord-opening-lead { font-size: 22px; line-height: 1.4; max-width: 800px; margin-bottom: 24px; }
.ord-afterword { position: relative; max-width: 1010px; padding-left: 100px; color: var(--ordinary-ink); }
.ord-afterword p { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
.ord-afterword p:last-child { margin-bottom: 0; }
.ord-also { position: absolute; left: 0; top: -7px; font: 46px/1.1 var(--ordinary-serif); color: var(--ordinary-accent); }
.ord-exposure-lower { position: relative; margin: 0; padding: 20px max(0px, calc(var(--ordinary-gutter) - 24px)) 0 var(--ordinary-gutter); }
.ord-exposure-lower img { display: block; width: 100%; height: 244px; object-fit: cover; object-position: center 71%; border-radius: 5px; outline: 5px solid var(--ordinary-ground); outline-offset: -1px; background: var(--ordinary-support); box-shadow: -16px 16px 0 var(--ordinary-accent); animation: ordinary-settle 850ms ease-out; }
.ord-scene-caption { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding: 0 max(24px, calc(var(--ordinary-gutter) - 24px)) 18px var(--ordinary-gutter); margin: 0; background: linear-gradient(transparent 0 23px, var(--ordinary-ground) 23px); font-size: 16px; line-height: 1.4; }
.ord-scene-caption span { display: block; max-width: 455px; background: var(--ordinary-support); padding: 13px 22px; margin-top: -19px; border-radius: 5px; box-shadow: 5px 5px 0 var(--ordinary-accent); transform: rotate(-1deg); }

/* Bare terraces keep one right edge. Terms hold their place while prose moves. */
.ord-definition-land { margin: 0 var(--ordinary-gutter); padding: 82px 0 90px; }
.ord-terrace { position: relative; --ordinary-term: 180px; }
.ord-terrace.ord-depth-b { --ordinary-term: 260px; }
.ord-terrace.ord-depth-c { --ordinary-term: 340px; }
.ord-terrace h2 { font-size: 40px; line-height: 1.25; margin: 0 0 36px; max-width: 840px; }
.ord-depth-b > h2 { margin-left: 80px; }
.ord-depth-c > h2 { margin-left: 160px; }
.ord-open-indents { display: block; position: absolute; left: -46px; top: 2px; width: 36px; height: 64px; color: var(--ordinary-accent); }
.ord-open-indents i { position: absolute; left: 0; top: 0; width: 36px; height: 58px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; border-bottom-left-radius: 5px; }
.ord-open-indents i:nth-child(2) { left: 10px; width: 26px; height: 42px; }
.ord-open-indents i:nth-child(3) { left: 20px; width: 16px; height: 26px; }
.ord-depth-b > .ord-open-indents { left: 34px; }
.ord-depth-c > .ord-open-indents { left: 114px; }
.ord-terms { display: grid; grid-template-columns: var(--ordinary-term) minmax(0, 1fr); margin: 0; align-items: start; }
.ord-terms dt { position: sticky; top: 32px; font-size: 28px; line-height: 1.4; padding-right: 30px; color: var(--ordinary-accent); }
.ord-terms dt > [data-lucide] { display: flex; width: 44px; height: 44px; padding: 10px; margin-bottom: 16px; background: var(--ordinary-support); border-radius: 5px; }
.ord-terms dd { margin: 0; min-width: 0; }
.ord-definition { position: relative; margin: 0 0 28px -24px; padding-left: 24px; border-left: 5px solid var(--ordinary-accent); font-size: 25px; line-height: 1.45; }
.ord-owner-passage { max-width: 760px; margin-left: auto; }
.ord-owner-passage a:hover, .ord-source-title a:hover { color: var(--ordinary-ground); background: var(--ordinary-accent); text-decoration: none; }
.ord-descend { padding-top: 78px; }
.ord-descend > .ord-terrace::before { content: ''; position: absolute; top: -35px; left: 0; right: 0; height: 5px; background: var(--ordinary-support); border-radius: 5px; }

/* Inner pictures form a generous photographic band, with an offset caption. */
.ord-guide-head { position: relative; padding: 34px var(--ordinary-gutter) 0; }
.ord-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 16px; margin-bottom: 29px; }
.ord-breadcrumb [data-lucide] { width: 18px; height: 18px; color: var(--ordinary-accent); }
.ord-breadcrumb a { color: var(--ordinary-ink); }
.ord-guide-head h1 { font-size: clamp(38px, 4.5vw, 65px); line-height: 1.18; letter-spacing: -1.1px; max-width: 1000px; margin: 0 0 24px; }
.ord-guide-lead { font-size: 24px; line-height: 1.45; max-width: 850px; }
.ord-photo-note { position: relative; margin: 42px 0 0; padding: 0 max(0px, calc(var(--ordinary-gutter) - 24px)) 20px 0; }
.ord-photo-note::before { content: ''; position: absolute; inset: 30px 0 0 0; z-index: -1; background: var(--ordinary-support); }
.ord-photo-note img { display: block; width: 100%; height: 275px; object-fit: cover; object-position: center 57%; border-radius: 0 5px 5px 0; background: var(--ordinary-support); box-shadow: 12px 12px 0 var(--ordinary-accent); }
.ord-photo-note figcaption { position: relative; width: fit-content; max-width: 520px; background: var(--ordinary-support); padding: 14px 24px; border-radius: 5px; font-size: 16px; line-height: 1.45; margin: -22px 0 0 auto; box-shadow: 5px 5px 0 var(--ordinary-accent); transform: rotate(-1deg); }
.ord-next-reading { display: flex; justify-content: flex-end; margin: 0 var(--ordinary-gutter) 80px; }
.ord-next-reading a { display: inline-flex; align-items: center; gap: 18px; padding: 15px 22px; border: 2px solid var(--ordinary-accent); border-radius: 5px; box-shadow: 5px 5px 0 var(--ordinary-support); font-size: 19px; text-decoration: none; }
.ord-next-reading a:hover { color: var(--ordinary-ground); background: var(--ordinary-accent); box-shadow: 5px 5px 0 var(--ordinary-ink); }
.ord-next-reading [data-lucide] { width: 22px; height: 22px; }
.ord-source-set { padding-top: 70px; }
.ord-source-set h2 { margin: 0 0 32px; font-size: 40px; line-height: 1.3; }
.ord-source-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); margin: 0; padding: 28px 0; border-top: 2px solid var(--ordinary-support); }
.ord-source-row dt { color: var(--ordinary-accent); padding-right: 30px; font-size: 22px; line-height: 1.4; }
.ord-source-row dd { margin: 0; min-width: 0; }
.ord-source-title { margin-bottom: 8px; font-size: 23px; line-height: 1.4; }
.ord-source-journal { font-size: 16px; margin-bottom: 16px; }
.ord-source-note { margin-bottom: 0; }
.ord-foot { position: relative; background: var(--ordinary-support); padding: 48px var(--ordinary-gutter) 30px; border-top: 8px solid var(--ordinary-accent); }
.ord-foot-top { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; }
.ord-foot-name { font: 32px/1.3 var(--ordinary-serif); }
.ord-foot-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 400px; justify-content: flex-end; }
.ord-foot-nav a { font-size: 17px; color: var(--ordinary-ink); }
.ord-guide-sentence { max-width: 700px; font-size: 17px; line-height: 1.5; margin: 34px 0 12px; }
.ord-copyright { font-size: 16px; margin: 0; }
.ord-lost { min-height: 55vh; padding-bottom: 80px; }
.ord-lost p { max-width: 700px; }
@keyframes ordinary-settle { from { transform: translateY(7px); } to { transform: translateY(0); } }
@media (max-width: 1000px) {
  :root { --ordinary-gutter: 48px; }
  .ord-title-band h1 { font-size: 52px; max-width: 790px; }
  .ord-title-band::after { right: 16px; width: 20px; }
  .ord-terrace { --ordinary-term: 140px; }
  .ord-terrace.ord-depth-b { --ordinary-term: 190px; }
  .ord-terrace.ord-depth-c { --ordinary-term: 240px; }
  .ord-terrace h2 { font-size: 34px; }
  .ord-depth-b > h2 { margin-left: 50px; }
  .ord-depth-c > h2 { margin-left: 100px; }
  .ord-depth-b > .ord-open-indents { left: 4px; }
  .ord-depth-c > .ord-open-indents { left: 54px; }
  .ord-terms dt { font-size: 24px; }
  .ord-definition { font-size: 23px; }
  .ord-source-row { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :root { --ordinary-gutter: 24px; }
  body { font-size: 18px; line-height: 1.55; }
  .ord-running-head { height: 72px; min-height: 0; padding: 2px 20px 3px; }
  .ord-wordmark { font-size: 21px; line-height: 25px; }
  .ord-head-links { padding-top: 0; font-size: 12px; line-height: 14px; }
  .ord-head-line { gap: 10px; min-height: 14px; }
  .ord-head-line:nth-child(2) { padding-right: 21px; }
  .ord-head-line:nth-child(3) { padding-right: 42px; }
  .ord-head-links [data-lucide] { width: 10px; height: 10px; }
  .ord-head-with-icon { gap: 3px; }
  .ord-running-head > .ord-open-indents { left: 24px; top: 14px; transform: scale(0.45); transform-origin: top left; }
  /* On phones the complete mention precedes all photography. The upper 55px
     exposure carries the full-scale open-indent motif instead of a photo. */
  .ord-opening { background: var(--ordinary-ground); }
  .ord-exposure-upper { position: relative; height: 55px; background: var(--ordinary-support); }
  .ord-exposure-upper::before, .ord-exposure-upper::after { content: ''; position: absolute; bottom: 11px; left: 24px; width: 140px; height: 24px; border-left: 4px solid var(--ordinary-accent); border-bottom: 4px solid var(--ordinary-accent); border-bottom-left-radius: 5px; }
  .ord-exposure-upper::after { left: 45px; bottom: 23px; width: 119px; height: 19px; }
  .ord-title-band { padding: 19px var(--ordinary-gutter) 23px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 24px) calc(100% - 12px), calc(100% - 24px) 100%, 0 100%); }
  .ord-title-band::before { width: 6px; }
  .ord-title-band::after { display: none; }
  .ord-title-band h1 { font-size: 34px; line-height: 1.16; letter-spacing: -0.5px; margin-bottom: 12px; }
  .ord-opening-lead { font-size: 17px; line-height: 1.4; margin-bottom: 22px; }
  .ord-afterword { padding-left: 35px; max-width: none; }
  .ord-afterword p { font-size: 16px; line-height: 1.4; margin-bottom: 9px; }
  .ord-also { left: -13px; top: -2px; font-size: 26px; }
  .ord-exposure-lower { padding-top: 5px; }
  .ord-exposure-lower img { height: 60px; border-radius: 5px 0 0 5px; outline: 0; box-shadow: -8px 8px 0 var(--ordinary-accent); object-position: center 69%; }
  .ord-scene-caption { font-size: 16px; line-height: 1.4; padding: 10px 24px 0; background: var(--ordinary-ground); }
  .ord-scene-caption span { max-width: 310px; margin-top: 0; padding: 10px 13px; box-shadow: 3px 3px 0 var(--ordinary-accent); }
  .ord-definition-land { padding-top: 64px; padding-bottom: 55px; }
  .ord-terrace { --ordinary-term: 75px; }
  .ord-terrace.ord-depth-b { --ordinary-term: 95px; }
  .ord-terrace.ord-depth-c { --ordinary-term: 115px; }
  .ord-terrace h2 { font-size: 27px; line-height: 1.3; margin: 0 0 27px; padding-left: 21px; }
  .ord-depth-b > h2 { margin-left: 20px; }
  .ord-depth-c > h2 { margin-left: 40px; }
  .ord-open-indents { left: -14px; top: 0; transform: scale(0.65); transform-origin: top left; }
  .ord-depth-b > .ord-open-indents { left: 6px; }
  .ord-depth-c > .ord-open-indents { left: 26px; }
  .ord-terms dt { top: 20px; font-size: 16px; line-height: 1.45; padding-right: 12px; overflow-wrap: anywhere; }
  .ord-terms dt > [data-lucide] { width: 34px; height: 34px; padding: 7px; margin-bottom: 12px; }
  .ord-terms dd { font-size: 18px; line-height: 1.55; }
  .ord-definition { font-size: 19px; line-height: 1.45; margin: 0 0 23px -12px; padding-left: 12px; border-left-width: 3px; }
  .ord-descend { padding-top: 60px; }
  .ord-descend > .ord-terrace::before { top: -25px; height: 3px; }
  .ord-guide-head { padding-top: 28px; }
  .ord-breadcrumb { font-size: 16px; gap: 7px; margin-bottom: 22px; }
  .ord-guide-head h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 20px; }
  .ord-guide-lead { font-size: 20px; line-height: 1.45; }
  .ord-photo-note { margin-top: 30px; padding: 0 24px 14px 0; }
  .ord-photo-note img { height: 170px; box-shadow: 8px 8px 0 var(--ordinary-accent); }
  .ord-photo-note figcaption { max-width: 285px; padding: 12px 16px; margin: -16px 0 0 30px; font-size: 16px; box-shadow: 3px 3px 0 var(--ordinary-accent); }
  .ord-next-reading { margin-bottom: 55px; }
  .ord-next-reading a { font-size: 18px; line-height: 1.4; padding: 14px 16px; }
  .ord-source-set { padding-top: 52px; }
  .ord-source-set h2 { font-size: 27px; }
  .ord-source-row { grid-template-columns: 95px minmax(0, 1fr); padding: 25px 0; }
  .ord-source-row dt { font-size: 16px; padding-right: 14px; overflow-wrap: anywhere; }
  .ord-source-title { font-size: 20px; }
  .ord-foot { padding-top: 32px; }
  .ord-foot-top { flex-direction: column; gap: 24px; }
  .ord-foot-nav { justify-content: flex-start; }
  .ord-foot-name { font-size: 27px; }
  .ord-guide-sentence { margin-top: 24px; }
  .ord-lost { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ord-exposure-lower img { animation: none; }
  a { transition: none; }
}