:root {
  --lv-ground: #E7F6FB;
  --lv-ink: #2C201C;
  --lv-clay: #7D4431;
  --lv-support: #E2C1DF;
  --lv-white: #FFFFFF;
  --lv-pool: #C5E3EC;
  --lv-rule: #AACBD4;
  --lv-reading: "Niramit", "Trebuchet MS", sans-serif;
  --lv-letter: "Stardos Stencil", Georgia, serif;
  --lv-edge: max(32px, calc((100vw - 1296px) / 2));
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 20px; }
body { margin: 0; background: var(--lv-ground); color: var(--lv-ink); font: 18px/1.62 var(--lv-reading); }
a { color: var(--lv-clay); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .16s, background-color .16s, box-shadow .16s; }
a:hover { text-decoration-thickness: 2px; background-color: var(--lv-pool); }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--lv-clay); outline-offset: 5px; }
svg, img { max-width: 100%; }
button, input, select { font: inherit; }
::selection { background: var(--lv-support); color: var(--lv-ink); }
i[data-lucide] { display: inline-flex; flex: 0 0 auto; }
i[data-lucide] svg, svg.lucide { width: 20px; height: 20px; flex: 0 0 auto; }
.lv-skip { position: absolute; top: -90px; left: 20px; z-index: 20; padding: 8px 14px; background: var(--lv-white); }
.lv-skip:focus { top: 10px; }
.lv-binding-head { max-width: 1440px; margin: auto; position: relative; height: 136px; padding: 20px var(--lv-edge) 0; }
.lv-binding-head::before { content: ""; position: absolute; top: 32px; left: var(--lv-edge); width: 78px; height: 28px; background: url("/longview-tiles-1184647ffb6f/distinct-strokes.svg") center / contain no-repeat; }
.lv-name { display: block; position: relative; z-index: 2; width: fit-content; margin: auto; color: var(--lv-ink); font: 400 clamp(40px, 4.1vw, 58px)/1 var(--lv-letter); text-decoration: none; letter-spacing: -.025em; }
.lv-name:hover { color: var(--lv-clay); background: none; }
.lv-hangers { position: relative; height: 64px; margin-top: 5px; }
.lv-hangers a { position: absolute; display: flex; align-items: flex-end; gap: 9px; border-left: 2px solid var(--lv-clay); padding: 0 12px 0 13px; font-size: 16px; line-height: 1.2; color: var(--lv-ink); text-decoration: none; }
.lv-hangers a:nth-child(1) { left: 18%; height: 32px; }
.lv-hangers a:nth-child(2) { left: 54%; height: 50px; }
.lv-hangers a:nth-child(3) { left: 83%; height: 23px; }
.lv-hangers a:hover, .lv-hangers a[aria-current="page"] { color: var(--lv-clay); border-left-width: 5px; padding-left: 10px; background: none; }
.lv-hangers a:hover span { box-shadow: 0 4px 0 var(--lv-clay); }
.lv-hangers svg, .lv-pane-cue svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* The wall fills the composition. The binding remains a real, empty cut. */
.lv-opening { isolation: isolate; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; margin: 30px 0 0; padding: 36px var(--lv-edge) 0; }
.lv-panorama { position: absolute; inset: 0 0 58px; z-index: -2; background: var(--lv-ground); }
.lv-pan-left, .lv-pan-right { position: absolute; top: 0; height: 100%; background-image: url("/longview-tiles-1184647ffb6f/binding-panorama.webp"); background-size: 100vw auto; background-repeat: no-repeat; background-color: var(--lv-pool); }
.lv-pan-left { left: 0; width: calc(62% - 26px); background-position: left 59%; }
.lv-pan-right { left: calc(62% + 26px); right: 0; background-position: right 59%; transform: translateY(-30px); box-shadow: 0 12px 0 var(--lv-clay); }
.lv-streamer { position: absolute; left: calc(62% - 26px); top: 240px; width: 52px; height: 32px; background: var(--lv-white); transform: skewY(-11deg); box-shadow: 0 5px 0 rgba(125, 68, 49, .19); }
.lv-title-band { grid-column: 1 / 11; position: relative; padding: 0 12px 12px 0; }
.lv-title-band::before { content: ""; position: absolute; inset: 12px 0 0 12px; background: var(--lv-clay); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%); }
.lv-home-title { position: relative; margin: 0; padding: 23px 54px 27px 29px; background: var(--lv-ground); border-left: 12px solid var(--lv-clay); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%); font: 400 clamp(44px, 4.35vw, 64px)/1.07 var(--lv-letter); text-wrap: balance; letter-spacing: -.025em; }
.lv-welcome { grid-column: 1 / 5; grid-row: 2; align-self: end; position: relative; margin: 96px 0 0; padding: 24px 28px 20px 0; background: var(--lv-ground); font-size: 19px; line-height: 1.5; box-shadow: -100px 0 0 var(--lv-ground); }
.lv-welcome::before { content: ""; display: block; width: 76px; height: 31px; margin: -39px 0 12px; background: var(--lv-ground) url("/longview-tiles-1184647ffb6f/distinct-strokes.svg") center / contain no-repeat; }
/* One open paragraph, connected to the page ground rather than a control. */
.lv-union { grid-column: 6 / -1; grid-row: 2; position: relative; margin: 94px calc(-1 * var(--lv-edge)) 0 0; padding: 35px var(--lv-edge) 37px 32px; align-self: end; background: var(--lv-ground); }
.lv-blend-word { position: absolute; top: 8px; right: var(--lv-edge); font: 400 24px/1 var(--lv-letter); color: var(--lv-clay); }
.lv-union p { margin: 0; font-size: 16px; line-height: 1.48; }
.lv-plus { position: absolute; left: 32px; bottom: -1px; font: 700 38px/1 var(--lv-reading); color: var(--lv-clay); }
.lv-opening-caption { grid-column: 1 / -1; margin: 0 calc(-1 * var(--lv-edge)); padding: 25px var(--lv-edge) 12px; background: var(--lv-ground); font-size: 16px; line-height: 1.4; color: var(--lv-clay); }
/* Complete, independent essays: the second leaf sits beyond the binding. */
.lv-reading-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; max-width: 1296px; margin: 30px auto 94px; padding: 0 24px; position: relative; }
.lv-reading-pair::before { content: ""; position: absolute; left: calc(50% - 50px); width: 100px; height: 48px; top: -24px; background: url("/longview-tiles-1184647ffb6f/distinct-strokes.svg") center / contain no-repeat; pointer-events: none; z-index: 2; }
.lv-reading-pane { height: 630px; overflow-y: scroll; overscroll-behavior-y: auto; scrollbar-gutter: stable; scrollbar-color: var(--lv-clay) var(--lv-ground); scrollbar-width: auto; background: var(--lv-white); border-top: 9px solid var(--lv-clay); padding: 0 38px 34px; scroll-padding-top: 122px; box-shadow: -9px 12px 0 var(--lv-pool), -9px 16px 0 var(--lv-clay); }
.lv-reading-pane + .lv-reading-pane { transform: translateY(28px); box-shadow: 9px 12px 0 var(--lv-pool), 9px 16px 0 var(--lv-clay); }
.lv-reading-pane::-webkit-scrollbar { width: 12px; }
.lv-reading-pane::-webkit-scrollbar-track { background: var(--lv-ground); }
.lv-reading-pane::-webkit-scrollbar-thumb { background: var(--lv-clay); border: 3px solid var(--lv-ground); }
.lv-pane-top { position: sticky; top: 0; margin: 0 -5px 24px; padding: 24px 5px 16px; background: var(--lv-white); border-bottom: 2px solid var(--lv-rule); z-index: 1; }
.lv-pane-top h2 { display: flex; align-items: center; gap: 13px; font: 400 32px/1.15 var(--lv-letter); margin: 0 0 12px; }
.lv-pane-top h2 svg { width: 27px; height: 27px; color: var(--lv-clay); }
.lv-pane-cue { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.2; color: var(--lv-clay); }
.lv-reading-pane h3 { font-size: 23px; font-weight: 600; line-height: 1.28; margin: 29px 0 15px; }
.lv-step-index { display: block; margin: 0 0 2px -15px; font: 400 48px/1 var(--lv-letter); color: var(--lv-clay); }
.lv-reading-pane p { margin: 0 0 21px; }
.lv-reading-pane .lv-return { margin: 34px 0 0; padding-top: 18px; border-top: 2px solid var(--lv-rule); font-size: 16px; }
.lv-return a { display: inline-block; padding: 3px 0; }
.lv-page-opening { max-width: 1296px; margin: 22px auto 0; padding: 0 24px; }
.lv-crumb { font-size: 16px; line-height: 1.4; margin: 0 0 24px; }
.lv-page-title { max-width: 1120px; font: 400 clamp(40px, 4.4vw, 63px)/1.08 var(--lv-letter); letter-spacing: -.025em; margin: 0 0 22px; padding-left: 25px; border-left: 10px solid var(--lv-clay); text-wrap: balance; }
.lv-page-deck { max-width: 760px; margin: 0 0 36px 35px; font-size: 21px; line-height: 1.5; }
.lv-inner-photo { margin: 0 -24px 68px; position: relative; padding-right: 52px; }
.lv-inner-photo img { display: block; width: 100%; height: 230px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.lv-inner-photo::after { content: ""; position: absolute; top: -24px; right: 0; width: 30px; height: 230px; background: var(--lv-clay); }
.lv-inner-photo figcaption { position: relative; width: fit-content; max-width: 760px; padding: 12px 24px; margin: -21px 0 -32px 38px; background: var(--lv-clay); color: var(--lv-white); font-size: 16px; line-height: 1.4; box-shadow: 7px 7px 0 var(--lv-pool); }
.lv-continuous { max-width: 1000px; margin: 42px auto 76px; padding: 1px 64px 24px 86px; border-left: 9px solid var(--lv-clay); background: var(--lv-white); box-shadow: -14px 14px 0 var(--lv-pool); }
.lv-continuous h2 { position: relative; font: 400 32px/1.2 var(--lv-letter); margin: 40px 0 18px; }
.lv-continuous h2::before { content: ""; position: absolute; top: 0; left: -79px; width: 63px; height: 36px; background: url("/longview-tiles-1184647ffb6f/distinct-strokes.svg") center / contain no-repeat; }
.lv-continuous p { margin: 0 0 23px; }
.lv-colophon { max-width: 1296px; padding: 31px 24px 36px; margin: 0 auto; border-top: 9px solid var(--lv-clay); display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px 70px; }
.lv-colophon p { margin: 0; max-width: 580px; font-size: 16px; }
.lv-shelf-links { display: flex; flex-wrap: wrap; gap: 8px 23px; align-content: start; font-size: 16px; }
.lv-copyline { grid-column: 1 / -1; }
.lv-missing { min-height: 45vh; }
.lv-missing p { max-width: 650px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .lv-binding-head::before { display: none; }
  .lv-home-title { font-size: 48px; }
  .lv-title-band { grid-column: 1 / 12; }
  .lv-opening { column-gap: 18px; }
  .lv-welcome { grid-column: 1 / 6; font-size: 18px; }
  .lv-union { grid-column: 6 / -1; padding-left: 24px; }
  .lv-plus { left: 24px; }
  .lv-reading-pair { gap: 40px; margin-right: 24px; margin-left: 24px; padding: 0; }
  .lv-reading-pane { padding-right: 24px; padding-left: 24px; }
  .lv-pane-top h2 { font-size: 28px; }
  .lv-page-opening { margin-right: 24px; margin-left: 24px; }
  .lv-continuous { margin-right: 48px; margin-left: 48px; padding-right: 44px; }
}
@media (max-width: 760px) {
  :root { --lv-edge: 18px; }
  body { font-size: 17px; line-height: 1.58; }
  .lv-binding-head { height: 82px; padding: 9px 18px 0; }
  .lv-binding-head::before { display: none; }
  .lv-name { font-size: 29px; margin: 0; line-height: 1.05; letter-spacing: -.025em; }
  .lv-hangers { height: 39px; margin-top: 2px; display: grid; grid-template-columns: 1fr 1.25fr .72fr; gap: 14px; }
  .lv-hangers a { position: static; height: 32px; gap: 5px; padding: 0 0 0 7px; font-size: 16px; white-space: nowrap; }
  .lv-hangers a:nth-child(1) { height: 24px; }
  .lv-hangers a:nth-child(2) { height: 35px; }
  .lv-hangers a:nth-child(3) { height: 28px; }
  .lv-hangers a:hover, .lv-hangers a[aria-current="page"] { padding-left: 4px; }
  .lv-hangers i, .lv-hangers svg { display: none; }
  .lv-opening { display: flex; flex-direction: column; margin-top: 16px; padding: 0 18px; }
  .lv-title-band { order: 0; margin: 0 -4px 16px 0; padding: 0 6px 6px 0; }
  .lv-title-band::before { inset: 6px 0 0 6px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
  .lv-home-title { padding: 3px 18px 9px 14px; border-left-width: 6px; font-size: 29px; line-height: 1.1; letter-spacing: -.015em; text-wrap: initial; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
  .lv-welcome { order: 1; max-width: none; font-size: 16px; line-height: 1.42; margin: 0 0 14px; padding: 0; box-shadow: none; }
  .lv-welcome::before { display: none; }
  .lv-union { order: 2; align-self: stretch; padding: 22px 0 26px; margin: 0 0 38px; }
  .lv-blend-word { font-size: 20px; top: -2px; right: 0; }
  .lv-union p { font-size: 16px; line-height: 1.4; }
  .lv-plus { font-size: 31px; left: 0; bottom: -5px; }
  .lv-panorama { position: relative; inset: auto; z-index: 0; order: 3; width: calc(100% + 36px); left: -18px; height: 75px; flex: 0 0 75px; margin: 0; }
  .lv-pan-left, .lv-pan-right { background-size: 100vw auto; }
  .lv-pan-right { transform: translateY(-30px); box-shadow: 0 7px 0 var(--lv-clay); }
  .lv-streamer { top: 22px; height: 22px; }
  .lv-opening-caption { order: 4; font-size: 16px; line-height: 1.4; margin: 13px 0 12px; padding: 0; }
  .lv-reading-pair { display: block; margin: 24px 18px 35px; padding: 0; }
  .lv-reading-pair::before { display: none; }
  .lv-reading-pane { height: auto; overflow: visible; scrollbar-gutter: auto; padding: 0 23px 25px; margin: 0 0 32px; border-top-width: 7px; box-shadow: -5px 6px 0 var(--lv-pool), -5px 9px 0 var(--lv-clay); }
  .lv-reading-pane + .lv-reading-pane { transform: none; box-shadow: 5px 6px 0 var(--lv-pool), 5px 9px 0 var(--lv-clay); }
  .lv-pane-top { position: static; margin-bottom: 21px; padding-top: 21px; }
  .lv-pane-top h2 { font-size: 28px; gap: 10px; margin-bottom: 0; }
  .lv-pane-top h2 svg { width: 24px; height: 24px; }
  .lv-pane-cue { display: none; }
  .lv-reading-pane h3 { font-size: 21px; margin-top: 24px; }
  .lv-step-index { font-size: 42px; margin-left: -12px; }
  .lv-reading-pane p { margin-bottom: 19px; }
  .lv-page-opening { margin-top: 22px; padding: 0 18px; }
  .lv-crumb { margin-bottom: 18px; }
  .lv-page-title { font-size: 33px; padding-left: 14px; border-left-width: 6px; }
  .lv-page-deck { font-size: 18px; margin: 0 0 29px 20px; }
  .lv-inner-photo { padding-right: 26px; margin: 0 -18px 49px; }
  .lv-inner-photo img { height: 135px; }
  .lv-inner-photo::after { height: 135px; width: 14px; top: -14px; }
  .lv-inner-photo figcaption { max-width: calc(100% - 28px); padding: 10px 14px; font-size: 16px; margin-left: 18px; line-height: 1.4; box-shadow: 5px 5px 0 var(--lv-pool); }
  .lv-continuous { padding: 1px 22px 22px; margin: 24px 18px 42px; border-left-width: 6px; box-shadow: -6px 8px 0 var(--lv-pool); }
  .lv-continuous h2 { font-size: 27px; margin-top: 29px; }
  .lv-continuous h2::before { display: none; }
  .lv-colophon { padding: 23px 0 30px; margin: 0 18px; display: block; }
  .lv-colophon p { margin-bottom: 20px; }
  .lv-shelf-links { margin-bottom: 22px; gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
}