:root {
  --tj-ground: #E7F0E0;
  --tj-ink: #2F2224;
  --tj-accent: #306A78;
  --tj-support: #C5E2DF;
  --tj-surface: #FBFCFA;
  --tj-edge: clamp(28px, 5.5vw, 96px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--tj-ground); color: var(--tj-ink); font-family: 'K2D', 'Trebuchet MS', sans-serif; font-size: 18px; line-height: 1.65; }
body, h1, h2, h3, p, figure { margin-top: 0; }
a { color: var(--tj-accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-underline-offset .18s, background-color .18s, color .18s; }
a:hover { text-underline-offset: 7px; }
a:focus-visible { outline: 3px solid var(--tj-ink); outline-offset: 5px; background: var(--tj-surface); color: var(--tj-ink); }
img { max-width: 100%; display: block; }
h1, h2, h3, .tj-wordmark, .tj-owner-voice { font-family: 'Pridi', Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(42px, 4.4vw, 66px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; margin-bottom: 24px; }
h2 { font-size: clamp(29px, 2.8vw, 40px); line-height: 1.18; letter-spacing: -.025em; margin-bottom: 24px; text-wrap: balance; }
p { margin-bottom: 23px; }
p:last-child { margin-bottom: 0; }
svg[data-lucide], i[data-lucide] { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: -.18em; }
.tj-skip { position: absolute; z-index: 20; left: 16px; top: -100px; padding: 10px 18px; background: var(--tj-surface); color: var(--tj-ink); }
.tj-skip:focus { top: 8px; }

/* The horizontal wordmark passes over the vertical navigation. */
.tj-masthead { height: 142px; position: relative; isolation: isolate; }
.tj-nav-warp { position: absolute; left: 31%; top: 0; bottom: 0; width: 174px; background: var(--tj-support); display: grid; grid-template-rows: 31px 57px 27px 27px; text-align: center; box-shadow: 10px 0 0 var(--tj-surface); }
.tj-nav-warp a { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--tj-ink); text-decoration: none; font-size: 16px; line-height: 1.1; }
.tj-nav-warp a:first-child { grid-row: 1; }
.tj-nav-warp a:nth-child(2) { grid-row: 3; }
.tj-nav-warp a:nth-child(3) { grid-row: 4; }
.tj-nav-warp a:hover { background: var(--tj-surface); }
.tj-nav-warp a:focus-visible { outline-offset: -3px; }
.tj-wordmark-band { position: absolute; left: 0; right: 0; top: 31px; height: 57px; background: var(--tj-accent); color: var(--tj-surface); display: flex; align-items: center; padding-inline: var(--tj-edge); z-index: 2; box-shadow: 0 7px 0 rgb(47 34 36 / 8%); animation: tj-settle .6s ease-out; }
.tj-wordmark { color: inherit; text-decoration: none; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.025em; line-height: 1.1; }
.tj-wordmark:hover { color: var(--tj-ground); }
.tj-threadmark { margin-left: auto; width: 38px; height: 38px; }
@keyframes tj-settle { from { transform: translateX(-12px); } to { transform: translateX(0); } }

/* One photograph fills the hero. The reading strips weave across its edges. */
.tj-home-weave { position: relative; min-height: 624px; isolation: isolate; }
.tj-photoband { position: absolute; z-index: -1; inset: 0; background: var(--tj-support); overflow: hidden; }
.tj-photoband > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.tj-arrival-title { position: relative; top: 32px; width: 59%; padding: 29px 40px 35px var(--tj-edge); background: var(--tj-ground); box-shadow: 12px 12px 0 rgb(47 34 36 / 13%); }
.tj-arrival-title h1 { max-width: 760px; margin: 0; font-size: clamp(46px, 4.5vw, 66px); }
.tj-arrival-title::after { content: ''; position: absolute; bottom: -10px; left: var(--tj-edge); width: 126px; height: 20px; background: var(--tj-accent); }
.tj-home-introductions { display: contents; }
.tj-welcome { position: absolute; left: 0; top: 358px; width: 37%; margin: 0; padding: 25px 34px 29px var(--tj-edge); background: var(--tj-ground); font-size: 18px; line-height: 1.55; box-shadow: 12px 12px 0 rgb(47 34 36 / 13%); }
.tj-welcome::after { content: ''; position: absolute; right: -26px; top: 28px; width: 52px; height: 12px; background: var(--tj-accent); }
/* Open, edge-to-edge prose: this mention has no control or card treatment. */
.tj-splice { position: absolute; right: 0; bottom: 29px; width: 51%; padding: 24px var(--tj-edge) 26px 30px; background: var(--tj-ground); font-size: 16px; line-height: 1.5; cursor: text; }
.tj-splice p:first-child { margin: 0 0 14px; font-size: 18px; line-height: 1.45; }
.tj-splice p:last-child { position: relative; margin: 0 0 0 60px; }
.tj-splice p:last-child::before { position: absolute; content: ''; height: 7px; width: 42px; left: -60px; top: 10px; background: var(--tj-accent); }
.tj-splice strong { font-weight: 600; color: var(--tj-accent); }
.tj-splice-address { white-space: nowrap; }
.tj-read-join { position: relative; display: flex; align-items: center; justify-content: center; gap: 25px; margin: 0; padding: 22px 20px 26px; color: var(--tj-accent); font-size: 18px; background: var(--tj-ground); }
.tj-read-join img { width: 126px; height: 42px; object-fit: cover; }

/* Unequal continuous strips trade sides at each full-width owner interlude. */
.tj-braid { display: grid; grid-template-columns: minmax(0, 1.19fr) minmax(0, .81fr); margin: 36px calc(var(--tj-edge) + 18px) 0 var(--tj-edge); align-items: stretch; position: relative; }
.tj-stream { padding: 48px clamp(30px, 4vw, 65px) 56px; position: relative; min-width: 0; }
.tj-explainer { background: var(--tj-surface); box-shadow: -12px 12px 0 var(--tj-support); }
.tj-meaning { margin-top: 44px; margin-bottom: -20px; z-index: 1; background: var(--tj-support); box-shadow: 18px 18px 0 var(--tj-accent); }
.tj-meaning a { color: var(--tj-ink); }
.tj-stream-name { display: flex; align-items: center; gap: 11px; position: sticky; top: 18px; z-index: 2; width: fit-content; max-width: 100%; margin: 0 0 32px; padding-block: 7px; background: inherit; font-size: 16px; line-height: 1.4; color: var(--tj-accent); }
.tj-stream-name::before { content: ''; width: 27px; height: 8px; background: currentColor; flex-shrink: 0; }
.tj-stream-name svg, .tj-stream-name i { width: 21px; height: 21px; }
.tj-meaning .tj-stream-name { color: var(--tj-ink); }
.tj-meaning .tj-stream-name::before { width: 41px; }
.tj-stream > p:not(.tj-stream-name) { max-width: 53ch; }
.tj-braid-turn { grid-template-columns: minmax(0, .81fr) minmax(0, 1.19fr); margin: 36px var(--tj-edge) 0 calc(var(--tj-edge) + 18px); }
.tj-braid-turn .tj-explainer { grid-column: 2; grid-row: 1; box-shadow: 12px 12px 0 var(--tj-support); }
.tj-braid-turn .tj-meaning { grid-column: 1; grid-row: 1; box-shadow: -18px 18px 0 var(--tj-accent); }
.tj-owner { position: relative; margin: 64px 0 0; padding: 55px max(var(--tj-edge), calc((100vw - 1050px) / 2)) 59px; background: var(--tj-accent); color: var(--tj-surface); }
.tj-owner-voice { max-width: 1050px; font-size: clamp(29px, 2.75vw, 40px); line-height: 1.42; letter-spacing: -.02em; }
.tj-owner > svg, .tj-owner > i { position: absolute; left: var(--tj-edge); top: -18px; width: 48px; height: 48px; padding: 10px; background: var(--tj-surface); color: var(--tj-accent); box-shadow: 12px 12px 0 var(--tj-support); }
.tj-owner::before { content: ''; position: absolute; top: -20px; right: 15%; height: 40px; width: 132px; background: var(--tj-support); box-shadow: 18px 18px 0 var(--tj-ground); }
.tj-owner a { color: var(--tj-surface); }
.tj-owner a:focus-visible { color: var(--tj-ink); }
.tj-owner:last-of-type { margin-bottom: 0; }

/* Photographic chapter bands carry a square-ended caption over their edge. */
.tj-entry { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 70px; align-items: end; padding: 41px var(--tj-edge) 46px; }
.tj-entry h1 { font-size: clamp(40px, 4.25vw, 64px); margin-bottom: 0; }
.tj-entry-intro { max-width: 43ch; font-size: 19px; line-height: 1.6; padding-top: 12px; }
.tj-crumb { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; color: var(--tj-accent); font-size: 16px; }
.tj-crumb span { width: 42px; height: 7px; background: var(--tj-accent); }
.tj-inner-photo { margin: 0 0 61px; position: relative; }
.tj-inner-photo > img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 48%; }
.tj-inner-photo::before { content: ''; position: absolute; width: 20%; height: 32px; background: var(--tj-ground); left: 0; top: 35px; }
.tj-inner-photo::after { content: ''; position: absolute; width: 13%; height: 28px; background: var(--tj-support); right: 0; top: 135px; box-shadow: -18px 14px 0 var(--tj-ground); }
.tj-inner-photo figcaption { position: relative; z-index: 1; max-width: 550px; margin: -42px 0 0 auto; padding: 21px var(--tj-edge) 21px 30px; background: var(--tj-ground); border-left: 8px solid var(--tj-accent); box-shadow: -12px 12px 0 var(--tj-support); font-size: 16px; line-height: 1.5; }
.tj-source-shelf { margin: 20px calc(var(--tj-edge) + 16px) 0 var(--tj-edge); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.tj-source-entry { padding: 38px 44px 42px; background: var(--tj-surface); min-width: 0; }
.tj-source-entry:nth-child(4n+2), .tj-source-entry:nth-child(4n+3) { background: var(--tj-support); }
.tj-source-entry:nth-child(even) { position: relative; top: 28px; box-shadow: 16px 16px 0 var(--tj-accent); }
.tj-source-entry > svg, .tj-source-entry > i { margin-bottom: 17px; width: 25px; height: 25px; }
.tj-source-entry h2 { font-size: 29px; margin-bottom: 18px; }
.tj-source-entry:nth-child(4n+2) a, .tj-source-entry:nth-child(4n+3) a { color: var(--tj-ink); }
.tj-source-credit { font-size: 16px; line-height: 1.5; margin-bottom: 15px; }
.tj-source-entry p:last-child { font-size: 17px; }

.tj-return-path { padding: 32px var(--tj-edge); background: var(--tj-support); display: flex; justify-content: space-between; align-items: center; gap: 40px; border-bottom: 12px solid var(--tj-surface); }
.tj-return-path p { max-width: 760px; margin: 0; font-family: 'Pridi', Georgia, serif; font-size: 28px; line-height: 1.4; }
.tj-return-path a { display: flex; gap: 12px; align-items: center; flex-shrink: 0; padding: 12px 0; color: var(--tj-ink); }
.tj-return-path a:hover { background: var(--tj-surface); }
.tj-footer { padding: 56px var(--tj-edge) 30px; background: var(--tj-ground); }
.tj-footer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; padding-bottom: 40px; }
.tj-footer-voice { font-family: 'Pridi', Georgia, serif; font-size: 29px; line-height: 1.4; max-width: 550px; }
.tj-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; align-content: start; }
.tj-footer nav a { font-size: 16px; width: fit-content; }
.tj-copyright { margin: 0; font-size: 16px; }
.tj-missing { padding: 65px var(--tj-edge) 80px; max-width: 1000px; }
.tj-missing p { max-width: 650px; }
@media (min-width: 1600px) {
  .tj-home-weave { min-height: 680px; }
  .tj-arrival-title { width: 56%; padding-block: 40px; }
  .tj-welcome { top: 390px; width: 35%; max-width: 700px; }
  .tj-splice { width: 48%; padding-block: 32px; }
  .tj-braid, .tj-source-shelf { max-width: 1440px; margin-inline: auto; }
}
@media (min-width: 651px) and (max-width: 1100px) {
  :root { --tj-edge: 30px; }
  .tj-arrival-title { width: 68%; }
  .tj-arrival-title h1 { font-size: 49px; }
  .tj-home-weave { min-height: 650px; }
  .tj-welcome { width: 39%; top: 340px; font-size: 17px; padding-right: 25px; }
  .tj-splice { width: 56%; padding-inline: 25px 30px; }
  .tj-splice p:first-child { font-size: 17px; }
  .tj-splice p:last-child { margin-left: 32px; }
  .tj-splice p:last-child::before { left: -32px; width: 20px; }
  .tj-stream { padding-inline: 30px; }
  .tj-owner { padding-inline: 90px 50px; }
  .tj-entry { gap: 34px; }
  .tj-entry-intro { font-size: 18px; }
  .tj-source-entry { padding-inline: 30px; }
  .tj-return-path { gap: 25px; }
  .tj-return-path a { flex-shrink: 1; }
}
@media (max-width: 650px) {
  :root { --tj-edge: 20px; }
  body { font-size: 17px; line-height: 1.65; }
  .tj-masthead { height: 90px; }
  .tj-nav-warp { left: 29%; width: 142px; grid-template-rows: 22px 26px 21px 21px; box-shadow: 7px 0 0 var(--tj-surface); }
  .tj-nav-warp a { font-size: 14px; gap: 5px; }
  .tj-nav-warp svg, .tj-nav-warp i { width: 15px; height: 15px; }
  .tj-wordmark-band { top: 22px; height: 26px; padding-inline: 16px; box-shadow: 0 4px 0 rgb(47 34 36 / 8%); }
  .tj-wordmark { font-size: 22px; line-height: 1; letter-spacing: -.03em; }
  .tj-threadmark { display: none; }
  .tj-home-weave { min-height: 0; display: flex; flex-direction: column; }
  .tj-arrival-title { position: static; width: 100%; padding: 24px 20px 19px; box-shadow: none; }
  .tj-arrival-title h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.025em; }
  .tj-arrival-title::after { display: none; }
  .tj-welcome { position: static; width: 100%; order: 1; margin: 0; padding: 0 20px 17px; box-shadow: none; font-size: 17px; line-height: 1.45; }
  .tj-welcome::after { display: none; }
  .tj-splice { position: static; width: 100%; order: 2; margin: 0; padding: 0 20px 21px; font-size: 16px; line-height: 1.4; }
  .tj-splice p:first-child { font-size: 17px; line-height: 1.4; margin-bottom: 11px; }
  .tj-splice p:last-child { margin-left: 16px; }
  .tj-splice p:last-child::before { left: -16px; width: 10px; height: 6px; top: 8px; }
  .tj-photoband { position: relative; inset: auto; height: 160px; flex: 0 0 160px; order: 3; z-index: 0; }
  .tj-photoband > img { object-position: 50% 48%; }
  .tj-photoband::before { content: ''; position: absolute; background: var(--tj-ground); left: 0; top: 17px; height: 20px; width: 19%; z-index: 1; }
  .tj-photoband::after { content: ''; position: absolute; background: var(--tj-support); right: 0; bottom: 19px; height: 18px; width: 24%; box-shadow: -10px 10px 0 var(--tj-ground); }
  .tj-read-join { padding: 16px 16px 15px; gap: 10px; font-size: 16px; }
  .tj-read-join img { width: 68px; height: 25px; }
  .tj-braid, .tj-braid-turn { display: flex; flex-direction: column; margin: 20px 30px 0 20px; }
  .tj-stream { padding: 29px 24px 35px; }
  .tj-explainer, .tj-braid-turn .tj-explainer { box-shadow: -8px 8px 0 var(--tj-support); }
  .tj-meaning, .tj-braid-turn .tj-meaning { margin: 0 0 0 10px; box-shadow: 10px 10px 0 var(--tj-accent); }
  .tj-stream-name { position: static; font-size: 16px; margin-bottom: 22px; padding-block: 0; gap: 8px; }
  .tj-stream-name::before { width: 19px; height: 7px; }
  .tj-meaning .tj-stream-name::before { width: 29px; }
  .tj-stream-name svg, .tj-stream-name i { width: 19px; height: 19px; }
  h2 { font-size: 29px; margin-bottom: 20px; }
  .tj-owner { margin-top: 43px; padding: 47px 27px 39px; }
  .tj-owner::before { right: 32px; width: 74px; height: 20px; top: -10px; box-shadow: 10px 10px 0 var(--tj-ground); }
  .tj-owner > svg, .tj-owner > i { left: 27px; top: -13px; width: 37px; height: 37px; padding: 8px; box-shadow: 7px 7px 0 var(--tj-support); }
  .tj-owner-voice { font-size: 26px; line-height: 1.45; }
  .tj-entry { display: block; padding: 30px 20px 32px; }
  .tj-entry h1 { font-size: 35px; line-height: 1.12; margin-bottom: 23px; }
  .tj-crumb { margin-bottom: 20px; font-size: 16px; }
  .tj-entry-intro { padding: 0; font-size: 18px; line-height: 1.55; }
  .tj-inner-photo { margin-bottom: 35px; }
  .tj-inner-photo > img { height: 190px; }
  .tj-inner-photo::before { top: 20px; height: 20px; width: 17%; }
  .tj-inner-photo::after { top: 111px; height: 19px; width: 13%; box-shadow: -10px 10px 0 var(--tj-ground); }
  .tj-inner-photo figcaption { max-width: 310px; margin-top: -23px; padding: 15px 20px 15px 19px; border-left-width: 6px; box-shadow: -8px 8px 0 var(--tj-support); font-size: 16px; }
  .tj-source-shelf { display: block; margin: 10px 30px 0 20px; }
  .tj-source-entry { padding: 30px 24px; }
  .tj-source-entry:nth-child(even) { top: 0; margin-left: 10px; box-shadow: 10px 10px 0 var(--tj-accent); }
  .tj-source-entry:nth-child(odd) { background: var(--tj-surface); }
  .tj-source-entry:nth-child(even) { background: var(--tj-support); }
  .tj-source-entry a { color: var(--tj-ink); }
  .tj-source-entry h2 { font-size: 27px; }
  .tj-return-path { display: block; padding: 27px 20px; border-bottom-width: 8px; }
  .tj-return-path p { font-size: 25px; margin-bottom: 7px; }
  .tj-return-path a { font-size: 16px; width: fit-content; }
  .tj-footer { padding: 35px 20px 25px; }
  .tj-footer-grid { display: block; padding-bottom: 28px; }
  .tj-footer-voice { font-size: 25px; margin-bottom: 27px; }
  .tj-footer nav { gap: 10px 20px; }
  .tj-copyright { font-size: 16px; }
  .tj-missing { padding: 38px 20px 50px; }
  .tj-missing h1 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}