:root {
  --ground: #FAFAFA;
  --ink: #213025;
  --leaf: #2C7E3B;
  --water: #C6DFDC;
  --surface: #FFFFFF;
  --display: 'Bree Serif', Georgia, serif;
  --reading: 'Murecho', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-bottom: 88px; }
body { margin: 0; padding-bottom: 64px; background: var(--ground); color: var(--ink); font: 18px/1.7 var(--reading); }
a { color: var(--leaf); text-underline-offset: .23em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 5px; }
::selection { background: var(--water); color: var(--ink); }
p { margin: 0 0 1.15em; }
h1, h2, h3 { font: 400 1em/1.16 var(--display); }
h1 { margin: 0; }
h2 { font-size: clamp(32px, 3.9vw, 56px); margin: 12px 0 24px; }
h3 { font-size: 29px; margin: 36px 0 16px; }
img { display: block; width: 100%; height: auto; color: var(--ink); background: var(--water); font: 16px/1.5 var(--reading); }
figure { margin: 0; }
figcaption { font-size: 16px; line-height: 1.5; max-width: 54ch; }
.canal-skip { position: absolute; top: -100px; left: 20px; z-index: 12; padding: 12px 20px; background: var(--ground); }
.canal-skip:focus { top: 12px; }
.canal-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; stroke-width: 1.7; }

/* The whole masthead travels together: footline on desktop, top flow on phone. */
.footline { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; background: var(--ground); border-top: 4px solid var(--leaf); }
.kai-wordmark { position: relative; color: var(--ink); font: 30px/1 var(--display); text-decoration: none; white-space: nowrap; }
.kai-wordmark::after { content: ''; display: inline-block; width: 22px; height: 7px; margin-left: 12px; background: var(--leaf); clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 65% 45%, 40% 45%, 40% 100%, 0 100%); }
.footline nav { display: flex; align-items: center; gap: clamp(22px, 4vw, 64px); }
.footline nav a { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ink); font-size: 16px; text-decoration: none; border-bottom: 3px solid transparent; }
.footline nav a:hover, .footline nav a:focus-visible { border-bottom-color: var(--leaf); color: var(--leaf); }

/* A pale-water canal sign, with a leaf edge and a square daylight cut. */
.daylight-hero { height: 600px; position: relative; isolation: isolate; display: grid; place-items: center; background: var(--water); }
.hero-photograph { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.opening-panel { width: min(1120px, calc(100% - 160px)); background: var(--water); border-top: 10px solid var(--leaf); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 48px) calc(100% - 26px), calc(100% - 48px) 100%, 0 100%); }
.title-plate { padding: 26px 44px 27px; text-align: center; }
.title-plate h1 { font-size: clamp(38px, 3.65vw, 54px); line-height: 1.12; text-wrap: balance; }
.title-plate h1 span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 3px; text-underline-offset: .13em; }
.opening-ground { display: grid; grid-template-columns: .8fr 1.4fr; align-items: start; gap: 42px; padding: 22px 36px 28px; background: var(--ground); border-top: 3px solid var(--leaf); }
.opening-note { max-width: 39ch; margin: 0; font-size: 17px; line-height: 1.55; }
.promise-hinge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 10px; color: var(--surface); text-decoration: none; }
.hinge-words { display: flex; align-items: center; min-height: 46px; padding: 9px 20px; border-radius: 60px; background: var(--leaf); font-size: 17px; line-height: 1.35; }
.hinge-end { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--leaf); }
.hinge-end .canal-icon { width: 20px; height: 20px; }
.promise-hinge:hover, .promise-hinge:focus-visible { color: var(--surface); }
.promise-hinge:hover .hinge-words, .promise-hinge:hover .hinge-end,
.promise-hinge:focus-visible .hinge-words, .promise-hinge:focus-visible .hinge-end { background: var(--ink); }
.promise-hinge:focus-visible { outline-offset: 5px; border-radius: 64px; }
.promise-context { max-width: 94ch; margin: 0; font-size: 16px; line-height: 1.45; }

/* Three big reading spreads, each with its own photographic balance. */
.day-spread { position: relative; padding: 64px 7vw 92px; scroll-margin-top: 22px; }
.daylight-cut { position: relative; height: 14px; margin-bottom: 27px; background: var(--leaf); }
.daylight-cut::after { content: ''; position: absolute; top: 0; left: 24%; width: 58px; height: 8px; background: var(--ground); }
.day-morning .daylight-cut::after { content: none; }
.day-heading { display: grid; grid-template-columns: 1fr 1.08fr; align-items: end; gap: 5vw; margin-bottom: 36px; }
.day-name { display: flex; align-items: baseline; gap: 15px; margin: 0 0 0 -22px; color: var(--leaf); font: 400 clamp(48px, 5.6vw, 82px)/1 var(--display); }
.day-name .canal-icon { width: 35px; height: 35px; align-self: center; }
.day-heading h2 { margin: 0; max-width: 17ch; font-size: clamp(34px, 3.3vw, 48px); }
.day-columns { display: grid; grid-template-columns: 1fr 1.08fr; gap: 5vw; align-items: start; }
.day-photo { position: relative; margin: 12px 0 0 -22px; padding-bottom: 16px; }
.day-photo img { aspect-ratio: 7/6; object-fit: cover; border-radius: 18px; box-shadow: 18px 18px 0 var(--water); }
.day-photo figcaption { position: relative; width: 88%; margin: -24px 0 0 28px; padding: 14px 18px 0; background: var(--ground); border-top: 5px solid var(--leaf); }
.day-copy { padding-top: 2px; }
.day-copy p:last-of-type { margin-bottom: 0; }
.day-next { display: inline-flex; align-items: center; gap: 13px; margin-top: 28px; font-weight: 500; line-height: 1.5; }
.day-next .canal-icon { padding: 3px; width: 28px; height: 28px; color: var(--ground); background: var(--leaf); border-radius: 50%; }
.day-next:hover .canal-icon, .day-next:focus-visible .canal-icon { background: var(--ink); }
.day-afternoon { background: var(--water); padding-top: 72px; }
.day-afternoon .day-name, .day-afternoon a { color: var(--ink); }
.day-afternoon .daylight-cut::after { left: 55%; background: var(--water); }
.day-afternoon .day-heading { grid-template-columns: 1.08fr 1fr; }
.day-afternoon .day-name { grid-column: 2; grid-row: 1; margin-left: -40px; }
.day-afternoon .day-heading h2 { grid-column: 1; grid-row: 1; }
.day-afternoon .day-columns { grid-template-columns: 1.08fr 1fr; }
.day-afternoon .day-photo { order: 2; margin: 34px -22px 0 0; }
.day-afternoon .day-photo img { box-shadow: -18px 18px 0 var(--ground); aspect-ratio: 1/1; }
.day-afternoon .day-photo figcaption { margin-left: 0; background: var(--water); }
.day-evening .daylight-cut::after { left: 77%; }
.day-evening .day-photo { margin-top: 38px; }
.day-evening .day-photo img { aspect-ratio: 6/5; }
.owner-close { position: relative; padding: 68px max(24px, calc((100vw - 880px) / 2)) 76px; background: var(--leaf); color: var(--surface); }
.owner-close::before { content: ''; position: absolute; top: 0; right: 14%; width: 80px; height: 20px; background: var(--ground); }
.owner-close h2 { max-width: 18ch; margin: 0 0 28px -48px; font-size: clamp(42px, 4vw, 60px); }
.owner-close p:last-child { margin-bottom: 0; }

/* Inner readings have a broad lead and a shorter full-width photographic band. */
.reading-lead { max-width: 1280px; margin: auto; padding: 52px 5vw 42px; }
.reading-context { display: flex; margin: 0 0 24px; font-size: 17px; line-height: 1.5; }
.reading-context a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 12px; color: var(--ink); background: var(--water); text-decoration: none; border-left: 6px solid var(--leaf); }
.reading-context a:hover { background: var(--ground); }
.reading-lead h1 { max-width: 1080px; font-size: clamp(40px, 4.6vw, 66px); text-wrap: balance; }
.reading-deck { max-width: 64ch; margin: 24px 0 0; font-size: 21px; line-height: 1.6; }
.reading-photo { position: relative; margin: 0 0 60px; padding-bottom: 28px; }
.reading-photo img { height: 330px; object-fit: cover; object-position: center 52%; }
.reading-photo figcaption { position: relative; max-width: 480px; width: calc(100% - 48px); margin: -32px 7vw 0 auto; padding: 16px 24px; background: var(--water); border-left: 8px solid var(--leaf); }
.reading-prose { width: min(780px, calc(100% - 48px)); margin: 0 auto 84px; }
.reading-prose h2 { position: relative; margin: 52px 0 22px -36px; padding-left: 28px; border-left: 8px solid var(--leaf); font-size: 36px; }
.reading-prose h2:first-child { margin-top: 24px; }
.reading-prose ul { padding-left: 24px; }
.reading-prose li { margin-bottom: 12px; }
.comparison-wrap { margin: 38px -58px; overflow-x: auto; border-bottom: 8px solid var(--leaf); }
.comparison-wrap table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.comparison-wrap th, .comparison-wrap td { text-align: left; vertical-align: top; padding: 18px; border-bottom: 2px solid var(--water); }
.comparison-wrap th { color: var(--surface); background: var(--leaf); font-weight: 500; }
.comparison-wrap td { background: var(--surface); }
.comparison-wrap th:first-child { width: 22%; }
.source-entry { position: relative; padding: 28px 0 20px; border-bottom: 5px solid var(--water); }
.source-entry h2, .source-entry h2:first-child { display: flex; align-items: baseline; gap: 18px; margin: 0 0 14px -42px; padding: 0; border: 0; font-size: 29px; }
.source-entry h2 .canal-icon { position: relative; top: 2px; width: 24px; height: 24px; color: var(--leaf); }
.source-entry p { font-size: 17px; }
.canal-footer { padding: 46px 7vw 36px; background: var(--ground); border-top: 12px solid var(--water); }
.footer-reading { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 14px; margin-bottom: 30px; }
.footer-reading a { font-size: 16px; }
.footer-line { max-width: 70ch; font-size: 16px; margin-bottom: 8px; }
.footer-copyright { font-size: 16px; margin: 0; }
.lost-page { min-height: 55vh; }
@media (min-width: 1600px) {
  .day-spread { padding-left: max(7vw, calc((100vw - 1400px) / 2)); padding-right: max(7vw, calc((100vw - 1400px) / 2)); }
}
@media (max-width: 1000px) and (min-width: 601px) {
  .opening-panel { width: calc(100% - 80px); }
  .title-plate { padding: 22px 30px; }
  .opening-ground { gap: 24px; padding: 20px 26px 26px; grid-template-columns: .7fr 1.3fr; }
  .opening-note { font-size: 16px; }
  .hinge-words { font-size: 16px; padding: 10px 14px; }
  .day-heading { display: block; }
  .day-name { margin: 0 0 18px; }
  .day-afternoon .day-name { margin-left: 0; }
  .day-heading h2 { max-width: 26ch; }
  .day-columns, .day-afternoon .day-columns { gap: 36px; }
  .day-photo, .day-afternoon .day-photo { margin-left: 0; margin-right: 0; }
  .comparison-wrap { margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 16px; scroll-padding-bottom: 0; }
  body { padding-bottom: 0; font-size: 17px; line-height: 1.7; }
  .footline { position: static; height: 66px; display: block; padding: 5px 20px 0; border-top: 0; border-bottom: 3px solid var(--leaf); }
  .kai-wordmark { display: block; width: fit-content; font-size: 24px; line-height: 27px; }
  .kai-wordmark::after { height: 6px; width: 18px; }
  .footline nav { justify-content: space-between; gap: 0; }
  .footline nav a { font-size: 16px; line-height: 20px; padding: 2px 0; gap: 6px; border-bottom-width: 2px; }
  .footline .canal-icon { width: 16px; height: 16px; }
  .daylight-hero { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 208px; height: auto; }
  .opening-panel { display: contents; }
  .hero-photograph { position: relative; z-index: 0; inset: auto; grid-column: 1; grid-row: 2; width: 100%; height: 208px; object-position: 53% 48%; }
  .opening-ground { grid-column: 1; grid-row: 1; display: block; border-top: 0; padding: 14px 20px 18px; }
  .opening-note { max-width: none; margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
  .promise-hinge { width: 100%; gap: 4px; margin-bottom: 10px; }
  .hinge-words { flex: 1; min-height: 46px; padding: 10px 14px; font-size: 16px; }
  .promise-context { font-size: 16px; line-height: 1.4; }
  .title-plate { position: relative; z-index: 1; grid-column: 1; grid-row: 2; align-self: center; justify-self: center; width: calc(100% - 40px); padding: 12px 12px 16px; background: var(--water); border-top: 7px solid var(--leaf); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%, 0 100%); }
  .title-plate h1 { font-size: 27px; line-height: 1.12; text-wrap: pretty; }
  .day-spread { padding: 38px 20px 52px; scroll-margin-top: 10px; }
  .daylight-cut { height: 10px; margin-bottom: 22px; }
  .daylight-cut::after { height: 5px; width: 30px; }
  .day-heading { display: block; margin-bottom: 24px; }
  .day-name, .day-afternoon .day-name { margin: 0 0 14px; gap: 10px; font-size: clamp(36px, 10vw, 54px); }
  .day-name .canal-icon { width: 25px; height: 25px; }
  .day-heading h2 { max-width: 20ch; font-size: 34px; }
  .day-columns, .day-afternoon .day-columns { display: flex; flex-direction: column; gap: 26px; }
  .day-photo, .day-afternoon .day-photo, .day-evening .day-photo { order: 0; width: calc(100% - 10px); margin: 0; padding-bottom: 0; }
  .day-photo img, .day-afternoon .day-photo img, .day-evening .day-photo img { aspect-ratio: 7/5; box-shadow: 10px 10px 0 var(--water); }
  .day-afternoon .day-photo img { box-shadow: 10px 10px 0 var(--ground); }
  .day-photo figcaption, .day-afternoon .day-photo figcaption { width: calc(100% - 16px); margin: -15px 0 0 16px; padding: 12px 0 0 12px; border-top-width: 4px; }
  .day-next { gap: 10px; margin-top: 22px; }
  .owner-close { padding: 40px 24px 46px; }
  .owner-close h2 { margin: 0 0 24px; font-size: 38px; }
  .owner-close::before { width: 42px; height: 10px; }
  .reading-lead { padding: 30px 24px 28px; }
  .reading-context { margin-bottom: 20px; font-size: 16px; }
  .reading-context a { padding: 7px 14px 7px 9px; gap: 9px; border-left-width: 4px; }
  .reading-lead h1 { font-size: 38px; }
  .reading-deck { margin-top: 20px; font-size: 18px; }
  .reading-photo { margin-bottom: 32px; padding-bottom: 10px; }
  .reading-photo img { height: 210px; }
  .reading-photo figcaption { width: calc(100% - 40px); margin: -20px 20px 0; padding: 12px 14px; border-left-width: 5px; }
  .reading-prose { margin-bottom: 48px; }
  .reading-prose h2 { margin: 34px 0 20px -8px; padding-left: 14px; font-size: 30px; border-left-width: 6px; }
  .comparison-wrap { margin: 28px -4px; }
  .comparison-wrap th, .comparison-wrap td { padding: 12px 8px; font-size: 16px; overflow-wrap: anywhere; }
  .source-entry h2, .source-entry h2:first-child { gap: 10px; margin-left: 0; padding-left: 0; font-size: 25px; border: 0; }
  .source-entry h2 .canal-icon { width: 20px; height: 20px; }
  .canal-footer { padding: 32px 24px; }
  .footer-reading { column-gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}