.field-journal {
  --fj-paper: #fffaf2;
  --fj-ink: #181818;
  --fj-star: #e9b400;
  --fj-clay: #d97757;
  --fj-green: #5d7455;
  --fj-muted: #7a7770;
  --fj-grid: rgba(24,24,24,.16);
  background: var(--fj-paper);
  color: var(--fj-ink);
  min-height: 100vh;
  padding-top: 38px;
}

.field-journal .source-stamp {
  align-items: center;
  bottom: 10px;
  color: var(--fj-muted);
  display: flex;
  font: 7px var(--font-code);
  gap: 6px;
  left: 18px;
  letter-spacing: .04em;
  position: absolute;
  text-transform: uppercase;
}
.field-journal .source-stamp i { background: var(--fj-star); border-radius: 50%; height: 5px; width: 5px; }

.fj-route-picker {
  align-items: stretch;
  background: var(--fj-paper);
  border-bottom: 1px solid var(--fj-ink);
  border-top: 1px solid var(--fj-ink);
  display: flex;
  height: 38px;
  left: 0;
  position: sticky;
  top: calc(var(--shell-h) + var(--status-h));
  z-index: 190;
}
.fj-route-picker > * { align-items: center; border: 0; border-right: 1px solid var(--fj-grid); display: flex; padding: 0 13px; }
.fj-route-picker > span { color: var(--fj-muted); font: 8px var(--font-code); letter-spacing: .08em; text-transform: uppercase; }
.fj-route-picker button { background: transparent; color: inherit; font: 9px var(--font-code); text-transform: uppercase; }
.fj-route-picker button:hover, .fj-route-picker button[aria-pressed="true"] { background: var(--fj-ink); color: var(--fj-paper); }
.fj-route-picker .fj-tend { border-left: 1px solid var(--fj-ink); border-right: 0; color: var(--fj-green); margin-left: auto; }
.fj-route-picker .fj-tend:hover { background: var(--fj-green); color: var(--fj-paper); }

.fj-margin {
  border-right: 1px solid var(--fj-grid);
  color: var(--fj-muted);
  display: flex;
  flex-direction: column;
  font: 8px/1.55 var(--font-code);
  justify-content: space-between;
  letter-spacing: .05em;
  padding: 25px 16px 45px;
  text-transform: uppercase;
}
.fj-margin strong { color: var(--fj-ink); font-weight: 500; writing-mode: vertical-rl; transform: rotate(180deg); }

.fj-hero {
  border-bottom: 1px solid var(--fj-ink);
  display: grid;
  grid-template-columns: 94px minmax(0, 1.15fr) minmax(360px, .85fr);
  min-height: 690px;
  position: relative;
}
.fj-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 7vw, 108px);
}
.fj-kicker { align-items: center; display: flex; font: 8px var(--font-code); gap: 11px; letter-spacing: .12em; margin-bottom: 48px; text-transform: uppercase; }
.fj-kicker i { background: var(--fj-ink); height: 1px; width: 55px; }
.fj-hero h1 { font: 400 clamp(54px, 7vw, 110px)/.91 var(--font-reading); letter-spacing: -.065em; margin: 0 0 32px; max-width: 900px; }
.fj-hero-copy > p { font: 18px/1.55 var(--font-reading); margin: 0; max-width: 620px; }
.fj-route-note { border-left: 1px solid var(--fj-clay); display: grid; gap: 7px; margin: 40px 0; max-width: 480px; padding-left: 14px; }
.fj-route-note small { color: var(--fj-clay); font: 8px var(--font-code); text-transform: uppercase; }
.fj-route-note span { color: var(--fj-muted); font: 12px/1.5 var(--font-code); }
.fj-actions { display: flex; gap: 22px; }
.fj-actions a { border-bottom: 1px solid var(--fj-ink); font: 500 11px var(--font-code); padding: 8px 0; text-decoration: none; text-transform: uppercase; }
.fj-actions a:first-child::before { color: var(--fj-clay); content: "→"; margin-right: 8px; }

.fj-hero-field {
  background-image: linear-gradient(var(--fj-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fj-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  border-left: 1px solid var(--fj-ink);
  overflow: hidden;
  position: relative;
}
.fj-sun { background: var(--fj-star); border-radius: 50%; height: 132px; position: absolute; right: 10%; top: 8%; transition: transform 1s cubic-bezier(.2,.8,.2,1); width: 132px; }
.fj-hero-field.is-tended .fj-sun { transform: translate(-28px, 20px) scale(1.18); }
.fj-hero-field svg { height: 82%; left: 0; overflow: visible; position: absolute; top: 8%; width: 100%; }
.fj-hero-field path { fill: none; stroke: var(--fj-ink); stroke-width: 1.2; }
.fj-hero-field circle { fill: var(--fj-paper); stroke: var(--fj-ink); stroke-width: 1; }
.fj-hero-field circle.active { fill: var(--fj-clay); }
.fj-hero-field text { fill: var(--fj-muted); font: 8px var(--font-code); text-transform: uppercase; }
.fj-hero-field text.active-label { fill: var(--fj-ink); font-weight: 600; }
.fj-specimen { background: var(--fj-paper); border: 1px solid var(--fj-ink); bottom: 42px; display: grid; gap: 6px; left: 30px; padding: 14px; position: absolute; transform: rotate(-1deg); width: 190px; }
.fj-specimen small { color: var(--fj-muted); font: 7px var(--font-code); text-transform: uppercase; }
.fj-specimen b { font: 500 22px var(--font-reading); }
.fj-specimen span { font: 9px var(--font-code); }

.fj-current {
  border-bottom: 1px solid var(--fj-ink);
  display: grid;
  grid-template-columns: 94px minmax(0, 1.3fr) minmax(300px, .7fr);
  min-height: 500px;
  position: relative;
}
.fj-current-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 104px); }
.fj-current-main > small, .fj-journey header small, .fj-cases header small, .fj-community-copy small, .fj-approach header small, .fj-ecosystem header small, .fj-quote small, .fj-closing > small { color: var(--fj-clay); font: 9px var(--font-code); letter-spacing: .1em; text-transform: uppercase; }
.fj-current h2 { font: 400 clamp(44px, 6vw, 86px)/.95 var(--font-reading); letter-spacing: -.045em; margin: 25px 0; }
.fj-current-main p { color: var(--fj-muted); font: 17px/1.6 var(--font-reading); margin: 0 0 32px; max-width: 620px; }
.fj-button { align-items: center; align-self: flex-start; background: var(--fj-ink); color: var(--fj-paper); display: flex; font: 9px var(--font-code); gap: 30px; padding: 15px 17px; text-decoration: none; text-transform: uppercase; }
.fj-button span { color: var(--fj-star); font-size: 17px; }
.fj-ledger { border-left: 1px solid var(--fj-ink); display: grid; grid-template-rows: repeat(4, 1fr); margin: 0; }
.fj-ledger div { border-bottom: 1px solid var(--fj-grid); display: flex; flex-direction: column; justify-content: center; padding: 20px 30px; }
.fj-ledger div:last-child { border: 0; }
.fj-ledger dt { color: var(--fj-muted); font: 8px var(--font-code); text-transform: uppercase; }
.fj-ledger dd { font: 500 17px var(--font-reading); margin: 7px 0 0; }

.fj-journey { border-bottom: 1px solid var(--fj-ink); min-height: 650px; padding: 76px clamp(25px, 7vw, 110px) 90px; position: relative; }
.fj-journey header { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 74px; }
.fj-journey h2, .fj-cases h2, .fj-community h2, .fj-approach h2, .fj-ecosystem h2 { font: 400 clamp(38px, 5vw, 72px)/1 var(--font-reading); letter-spacing: -.04em; margin: 0; }
.fj-weeks { display: grid; grid-template-columns: repeat(3, 1fr); }
.fj-weeks article { border-top: 1px solid var(--fj-ink); min-height: 250px; padding: 20px 34px 20px 0; position: relative; }
.fj-weeks article:not(:last-child) { border-right: 1px solid var(--fj-grid); margin-right: 30px; }
.fj-weeks article > span { color: var(--fj-clay); font: 9px var(--font-code); }
.fj-weeks article > i { background: var(--fj-paper); border: 1px solid var(--fj-ink); border-radius: 50%; height: 13px; position: absolute; right: -7px; top: -7px; width: 13px; }
.fj-weeks article:last-child > i { background: var(--fj-star); right: 0; }
.fj-weeks h3 { font: 500 25px/1.12 var(--font-reading); margin: 38px 0 14px; }
.fj-weeks p { color: var(--fj-muted); font: 13px/1.6 var(--font-interface); margin: 0; max-width: 34ch; }
.fj-weeks button { background: transparent; border: 0; border-bottom: 1px solid var(--fj-muted); color: var(--fj-muted); font: 8px var(--font-code); margin-top: 20px; padding: 4px 0; text-transform: uppercase; }
.fj-weeks button:hover, .fj-weeks button[aria-current="true"] { border-color: var(--fj-clay); color: var(--fj-clay); }
.fj-growth { align-items: center; display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
.fj-growth span { background: #d7d3ca; height: 10px; transition: background .4s ease; }
.fj-growth b { color: var(--fj-muted); font: 7px var(--font-code); margin-top: 6px; text-transform: uppercase; }
.fj-growth[data-stage="1"] span:first-child, .fj-growth[data-stage="2"] span:nth-child(-n+2), .fj-growth[data-stage="3"] span { background: var(--fj-green); }

.fj-cases { border-bottom: 1px solid var(--fj-ink); padding: 80px clamp(25px, 6vw, 96px); position: relative; }
.fj-cases > header { display: grid; gap: 60px; grid-template-columns: 1.2fr .8fr; margin-bottom: 65px; }
.fj-cases header h2 { margin-top: 22px; }
.fj-cases header > p { align-self: end; color: var(--fj-muted); font: 13px/1.65 var(--font-interface); margin: 0; }
.fj-specimens { border-top: 1px solid var(--fj-ink); }
.fj-case { border-bottom: 1px solid var(--fj-ink); }
.fj-case-head { align-items: center; background: transparent; border: 0; color: inherit; display: grid; gap: 18px; grid-template-columns: 70px minmax(170px,.6fr) 1fr 30px; min-height: 82px; padding: 0; text-align: left; width: 100%; }
.fj-case-head span { color: var(--fj-clay); font: 8px var(--font-code); }
.fj-case-head strong { font: 500 16px var(--font-code); }
.fj-case-head em { color: var(--fj-muted); font: normal 14px var(--font-reading); }
.fj-case-head i { font: normal 20px var(--font-interface); transition: transform .2s; }
.fj-case.is-open .fj-case-head i { transform: rotate(45deg); }
.fj-case-body { display: grid; gap: 34px; grid-template-columns: 1.25fr .75fr; padding: 0 0 36px 88px; }
.fj-case-body[hidden] { display: none; }
.fj-case-body figure { background: #ece8df; margin: 0; min-height: 220px; overflow: hidden; position: relative; }
.fj-case-body img { display: block; height: 100%; max-height: 420px; object-fit: cover; width: 100%; }
.fj-case-body figcaption { background: var(--fj-paper); bottom: 8px; font: 7px var(--font-code); left: 8px; padding: 5px 7px; position: absolute; text-transform: uppercase; }
.fj-case-body > div { padding-right: 25px; }
.fj-case-body small { color: var(--fj-clay); font: 8px var(--font-code); text-transform: uppercase; }
.fj-case-body p { font: 17px/1.55 var(--font-reading); margin: 18px 0; }
.fj-case-body code { color: var(--fj-muted); font: 9px var(--font-code); }

.fj-community { border-bottom: 1px solid var(--fj-ink); display: grid; gap: 60px; grid-template-columns: .72fr 1.28fr; padding: 90px clamp(25px, 6vw, 96px) 110px; position: relative; }
.fj-community-copy h2 { margin: 22px 0 28px; }
.fj-community-copy p { color: var(--fj-muted); font: 15px/1.65 var(--font-reading); max-width: 42ch; }
.fj-passports { align-items: start; display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); padding-top: 34px; }
.fj-passports article { background: #f3eee4; border: 1px solid var(--fj-ink); padding: 10px 10px 18px; transform: rotate(var(--tilt)); transition: transform .2s; }
.fj-passports article:hover { transform: rotate(0) translateY(-7px); }
.fj-passports img { aspect-ratio: .82; filter: grayscale(1) contrast(1.05); object-fit: cover; width: 100%; }
.fj-passports span { color: var(--fj-clay); display: block; font: 7px var(--font-code); margin-top: 10px; }
.fj-passports h3 { font: 500 14px var(--font-interface); margin: 7px 0 3px; }
.fj-passports p { color: var(--fj-muted); font: 8px var(--font-code); margin: 0; }

.fj-approach { border-bottom: 1px solid var(--fj-ink); display: grid; gap: 54px; grid-template-columns: .85fr 1.15fr; min-height: 700px; padding: 90px clamp(25px, 6vw, 96px); position: relative; }
.fj-approach header h2 { margin: 24px 0; }
.fj-approach header > p { color: var(--fj-muted); font: 15px/1.6 var(--font-reading); max-width: 48ch; }
.fj-approach ol { border-top: 1px solid var(--fj-ink); list-style: none; margin: 0; padding: 0; }
.fj-approach li { border-bottom: 1px solid var(--fj-grid); display: grid; gap: 16px; grid-template-columns: 45px 1fr; padding: 22px 0; }
.fj-approach li > span { color: var(--fj-clay); font: 9px var(--font-code); }
.fj-approach h3 { font: 500 20px var(--font-reading); margin: 0 0 8px; }
.fj-approach li p { color: var(--fj-muted); font: 12px/1.6 var(--font-interface); margin: 0; }
.fj-approach aside { background: var(--fj-star); bottom: 60px; left: 7%; max-width: 330px; padding: 20px; position: absolute; transform: rotate(-2deg); }
.fj-approach aside span { font: 8px var(--font-code); }
.fj-approach aside blockquote { font: 18px/1.35 var(--font-reading); margin: 18px 0 0; }

.fj-ecosystem { border-bottom: 1px solid var(--fj-ink); padding: 90px clamp(25px, 6vw, 96px); position: relative; }
.fj-ecosystem > header { display: grid; grid-template-columns: .6fr 1.4fr; margin-bottom: 60px; }
.fj-ecosystem > div { border-left: 1px solid var(--fj-ink); border-top: 1px solid var(--fj-ink); display: grid; grid-template-columns: repeat(4, 1fr); }
.fj-ecosystem article { border-bottom: 1px solid var(--fj-ink); border-right: 1px solid var(--fj-ink); display: flex; flex-direction: column; min-height: 320px; padding: 22px; }
.fj-ecosystem article > span { color: var(--fj-muted); font: 7px var(--font-code); }
.fj-ecosystem code { color: var(--fj-clay); font: 9px var(--font-code); margin: 35px 0 12px; }
.fj-ecosystem h3 { font: 500 21px var(--font-reading); margin: 0; }
.fj-ecosystem article p { color: var(--fj-muted); font: 12px/1.6 var(--font-interface); }
.fj-ecosystem article a { border-bottom: 1px solid var(--fj-ink); font: 8px var(--font-code); margin-top: auto; padding-bottom: 6px; text-decoration: none; }

.fj-quote { border-bottom: 1px solid var(--fj-ink); display: grid; grid-template-columns: 1.2fr .8fr; min-height: 620px; padding: 90px clamp(25px, 6vw, 96px); position: relative; }
.fj-quote > div { align-self: center; }
.fj-quote blockquote { font: 400 clamp(30px, 4vw, 56px)/1.18 var(--font-reading); letter-spacing: -.025em; margin: 28px 0; max-width: 850px; }
.fj-quote > div > p { color: var(--fj-muted); font: 9px var(--font-code); text-transform: uppercase; }
.fj-quote figure { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.fj-rings { background: repeating-radial-gradient(circle, transparent 0 11px, var(--fj-clay) 12px 13px); border-radius: 50%; height: 260px; width: 260px; }
.fj-quote figcaption { color: var(--fj-muted); font: 7px var(--font-code); margin-top: 14px; }

.fj-closing { background: var(--fj-ink); color: var(--fj-paper); min-height: 650px; padding: 110px clamp(25px, 7vw, 120px) 60px; position: relative; }
.fj-closing h2 { font: 400 clamp(55px, 8vw, 125px)/.9 var(--font-reading); letter-spacing: -.06em; margin: 26px 0; max-width: 1050px; }
.fj-closing > p { color: #aeaaa1; font: 18px/1.6 var(--font-reading); max-width: 650px; }
.fj-closing > div { display: flex; gap: 22px; margin-top: 42px; }
.fj-closing > div a, .fj-closing > div button { background: var(--fj-star); border: 1px solid var(--fj-star); color: var(--fj-ink); font: 9px var(--font-code); padding: 14px 17px; text-decoration: none; text-transform: uppercase; }
.fj-closing > div .fj-secondary { background: transparent; border-color: #77736c; color: var(--fj-paper); }
.fj-closing footer { align-items: end; border-top: 1px solid #3e3d39; bottom: 0; display: grid; font: 8px var(--font-code); grid-template-columns: 1fr auto auto; left: clamp(25px, 7vw, 120px); padding: 22px 0; position: absolute; right: clamp(25px, 7vw, 120px); }
.fj-closing footer strong { font: 600 20px var(--font-interface); }
.fj-closing footer span { color: #77736c; margin-left: 28px; }
.fj-closing .source-stamp { color: #77736c; }

@media (max-width: 900px) {
  .fj-hero, .fj-current { grid-template-columns: 68px 1fr; }
  .fj-hero-field, .fj-ledger { border-left: 0; border-top: 1px solid var(--fj-ink); grid-column: 1 / -1; min-height: 500px; }
  .fj-margin { grid-row: 1; }
  .fj-hero-copy, .fj-current-main { padding: 60px 35px; }
  .fj-journey header, .fj-ecosystem > header { grid-template-columns: 1fr; gap: 22px; }
  .fj-community, .fj-approach { grid-template-columns: 1fr; }
  .fj-approach aside { bottom: auto; left: auto; margin-top: 20px; position: relative; }
  .fj-ecosystem > div { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .field-journal { padding-top: 0; }
  .fj-route-picker { overflow-x: auto; top: calc(var(--shell-h) + var(--status-h)); }
  .fj-route-picker > span { display: none; }
  .fj-route-picker button { min-width: max-content; }
  .fj-hero { display: block; min-height: 0; }
  .fj-margin { border-bottom: 1px solid var(--fj-grid); border-right: 0; flex-direction: row; padding: 14px 18px; }
  .fj-margin strong { writing-mode: initial; transform: none; }
  .fj-hero-copy { min-height: 590px; padding: 46px 20px; }
  .fj-hero h1 { font-size: clamp(47px, 14vw, 64px); hyphens: auto; overflow-wrap: anywhere; }
  .fj-hero-field { min-height: 460px; }
  .fj-current { display: block; }
  .fj-current > .fj-margin { display: none; }
  .fj-current-main { padding: 60px 20px; }
  .fj-ledger { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .fj-ledger div { border-bottom: 1px solid var(--fj-grid); min-height: 110px; padding: 16px; }
  .fj-ledger div:nth-child(odd) { border-right: 1px solid var(--fj-grid); }
  .fj-journey, .fj-cases, .fj-community, .fj-approach, .fj-ecosystem, .fj-quote { padding: 58px 20px 74px; }
  .fj-journey header { margin-bottom: 44px; }
  .fj-weeks { grid-template-columns: 1fr; }
  .fj-weeks article:not(:last-child) { border-right: 0; margin-right: 0; }
  .fj-weeks article > i { right: 0; }
  .fj-growth { display: none; }
  .fj-cases > header { grid-template-columns: 1fr; gap: 28px; }
  .fj-case-head { gap: 9px; grid-template-columns: 42px 1fr 22px; padding: 14px 0; }
  .fj-case-head em { display: none; }
  .fj-case-body { grid-template-columns: 1fr; padding: 0 0 30px; }
  .fj-passports { gap: 8px; }
  .fj-passports article { padding: 6px 6px 12px; }
  .fj-passports h3 { font-size: 11px; }
  .fj-passports p { display: none; }
  .fj-ecosystem > div { grid-template-columns: 1fr; }
  .fj-ecosystem article { min-height: 260px; }
  .fj-quote { display: block; }
  .fj-quote figure { margin-top: 50px; }
  .fj-rings { height: 200px; width: 200px; }
  .fj-closing { min-height: 760px; padding: 85px 20px 80px; }
  .fj-closing footer { left: 20px; right: 20px; grid-template-columns: 1fr; gap: 8px; }
  .fj-closing footer span { margin: 0; }
}