/* The Vantage — the journal (/journal and every piece).
   Built on the same tokens as the rest of the estate; adds nothing to the
   palette and no new type sizes.

   The journal is read, not worked. So unlike the document library it is
   allowed the reading comforts — a measured column, a generous lede, quotes
   set in the display face — but it stays as still as the library: nothing
   reveals on scroll, nothing fades in, and the page is complete on first
   paint. The only movement is the quiet layer the whole site shares: hover,
   the press scale, and the film's play mark warming under the pointer. */

/* ---- Page frame ---- */
.jn-body { margin: 0; background: var(--vt-paper); font-family: var(--font-text); color: var(--text-body); }
.jn-wrap { max-width: var(--container-max); margin: 0 auto; width: 100%; box-sizing: border-box; padding: 0 clamp(20px, 5vw, 40px); }
.jn-wrap--text { max-width: calc(var(--container-text) + 2 * clamp(20px, 5vw, 40px)); }
.jn-wrap--media { max-width: calc(1000px + 2 * clamp(20px, 5vw, 40px)); }

.jn-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--vt-eucalyptus); color: var(--vt-bone);
  font-family: var(--font-eyebrow); font-size: 12px;
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  padding: 14px 24px; border-bottom: none;
}
.jn-skip:focus { left: 0; }

/* The nav itself is site.css's, markup and all — the same six anchors, the
   same drawer below 900px. These pages once carried a reduced nav of their
   own, on the reasoning that three links fit on a phone where six do not;
   what it actually did was strand a reader who arrived on a piece from a
   search or a shared link with no way through to the rest of the estate.
   The drawer is the answer to six links on a phone, and it was already here.

   The one difference is the brand: a link home on these pages, a bare <img>
   on the home page, where a logo pointing at the page you are on points
   nowhere. The extra <a> puts the mark out of reach of site.css's
   `header > img`, so it is sized here, to site.css's own heights. */
.jn-brand { border-bottom: none; display: block; flex: 0 0 auto; }
.nav-desktop header > .jn-brand img { height: 42px; width: auto; display: block; }
.nav-mobile > .jn-brand img { height: 30px; width: auto; display: block; }

/* ---- Masthead ---- */
.jn-head { padding: clamp(56px, 9vw, 104px) 0 clamp(32px, 5vw, 56px); }
.jn-h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(46px, 7vw, 84px); line-height: 0.96;
  letter-spacing: var(--tracking-display); color: var(--text-heading);
}
.jn-h1--article { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.02; max-width: 20ch; }
.jn-lede {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: var(--measure); font-size: var(--fs-body-l); line-height: var(--lh-body-l);
}

/* A strand name, wherever it appears above a title: tower tan, no underline,
   deepening to the estate green under the pointer. */
a.jn-strand-link { color: var(--vt-tower-tan); border-bottom: none; transition: color var(--dur-base) var(--ease-standard); }
@media (hover: hover) { a.jn-strand-link:hover { color: var(--vt-eucalyptus); } }

/* ---- The strand tabs ----
   The names, and nothing else: the strands explain themselves through what
   is filed under them. Set exactly like the suite selector on the home page
   — eyebrow face, hairline rule, the tan line under the one that is on.
   Buttons, so the page still reads as a complete journal without
   JavaScript; it simply cannot be narrowed. */
.jn-tabs-wrap { padding-bottom: clamp(24px, 4vw, 40px); }
.jn-tabs {
  display: flex; gap: clamp(20px, 4vw, 40px);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border-hairline);
}
.jn-tabs::-webkit-scrollbar { display: none; }
.jn-tab {
  appearance: none; background: none; border: 0; padding: 0 0 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap; min-height: 44px;
  font-family: var(--font-eyebrow); font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.jn-tab.is-on { color: var(--text-heading); border-bottom-color: var(--vt-tower-tan); }
@media (hover: hover) { .jn-tab:hover { color: var(--text-heading); } }
.jn-tab:focus-visible { outline-offset: -2px; }

/* ---- The list ---- */
.jn-list-wrap { padding-bottom: clamp(64px, 10vw, 120px); }
.jn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.jn-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.jn-card:has(.jn-card-media) { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); }
.jn-card[hidden] { display: none; }
.jn-card-media { border-bottom: none; display: block; overflow: hidden; background: var(--vt-sandstone-30); border: 1px solid var(--border-hairline); aspect-ratio: 4 / 3; }
.jn-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-cinematic) var(--ease-standard); }
@media (hover: hover) { .jn-card-media:hover img { transform: scale(1.03); } }
.jn-card-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.jn-card-title {
  margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(26px, 3vw, 36px); line-height: 1.12;
  letter-spacing: var(--tracking-display); color: var(--text-heading); max-width: 24ch;
}
.jn-card-title a { color: inherit; border-bottom: none; transition: color var(--dur-base) var(--ease-standard); }
@media (hover: hover) { .jn-card-title a:hover { color: var(--vt-tower-tan); } }
.jn-card-summary { margin: 0; max-width: var(--measure); font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-body); }

/* The byline: the plan's insistence on a named human author, set small. */
.jn-byline {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted);
  margin-top: var(--space-1);
}
.jn-byline-name { color: var(--text-body); }
.jn-byline-role::before { content: ", "; }
.jn-byline-role { margin-left: calc(-1 * var(--space-3)); }

/* "More from the journal": the same cards, three abreast, without pictures. */
.jn-list--more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 clamp(32px, 5vw, 64px); border-top: 0; }
.jn-list--more .jn-card { grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 3vw, 32px) 0; border-top: 1px solid var(--border-hairline); border-bottom: 0; }
.jn-list--more .jn-card-media { display: none; }
.jn-list--more .jn-card-title { font-size: clamp(22px, 2.2vw, 28px); }

/* ---- Empty states ---- */
.jn-empty { padding: clamp(40px, 7vw, 72px) 0; max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.jn-empty[hidden] { display: none; }
.jn-empty--first { border-top: 1px solid var(--border-hairline); }
.jn-empty-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--text-heading); max-width: 20ch; }
.jn-empty-body { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-muted); }
.jn-empty .btn { margin-top: var(--space-3); }
.jn-textbtn {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-link); border-bottom: 1px solid var(--border-strong);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.jn-textbtn:hover { color: var(--text-link-hover); border-bottom-color: var(--text-link-hover); }

/* ---- A piece ---- */
.jn-article { padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 104px); }
.jn-article-head { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px); }
.jn-article-head .jn-lede { margin-top: var(--space-2); }
.jn-article-head .jn-byline { margin-top: var(--space-2); }

.jn-hero { margin: clamp(40px, 6vw, 72px) auto 0; display: flex; flex-direction: column; gap: 12px; }
.jn-hero img { width: 100%; height: auto; display: block; border: 1px solid var(--border-hairline); background: var(--vt-sandstone-30); }

.jn-film { margin: clamp(40px, 6vw, 72px) auto 0; display: flex; flex-direction: column; gap: 12px; }
.jn-film .film { aspect-ratio: 16 / 9; }
.jn-film .caption a { color: inherit; }

/* ---- The prose ----
   Reading size, a 58ch measure, and quotes set in the display face because a
   quotation kept whole is the format model's whole point: the piece is
   written from the transcript, the maker's own words intact. */
.jn-prose { margin-top: clamp(40px, 6vw, 72px); font-size: 18px; line-height: 1.7; }
.jn-prose > * { max-width: var(--measure-wide); }
.jn-prose p { margin: 0 0 1.4em; max-width: var(--measure); }
.jn-prose h2 {
  margin: 2.2em 0 .8em; font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(30px, 3.4vw, 38px); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--text-heading);
}
.jn-prose h3 {
  margin: 1.8em 0 .7em; font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; letter-spacing: var(--tracking-display); color: var(--text-heading);
}
.jn-prose > :first-child { margin-top: 0; }
.jn-prose ul, .jn-prose ol { margin: 0 0 1.4em; padding-left: 1.2em; max-width: var(--measure); }
.jn-prose li { margin: 0 0 .5em; padding-left: .3em; }
.jn-prose li::marker { color: var(--vt-tower-tan); }
.jn-prose hr { border: 0; width: 40px; height: 1px; background: var(--vt-tower-tan); margin: 2.6em 0; }
.jn-prose strong { font-weight: var(--fw-regular); color: var(--text-heading); }

.jn-quote {
  margin: 2em 0; padding: var(--space-2) 0 var(--space-2) clamp(20px, 3vw, 32px);
  border-left: 1px solid var(--vt-tower-tan);
  max-width: var(--measure-wide);
}
.jn-quote p {
  margin: 0 0 .6em; max-width: none;
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.28;
  letter-spacing: var(--tracking-display); color: var(--text-heading);
}
.jn-quote p:last-of-type { margin-bottom: 0; }
.jn-quote footer {
  margin-top: var(--space-4);
  font-family: var(--font-eyebrow); font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
}
.jn-quote footer::before { content: "— "; }

.jn-figure { margin: 2.2em 0; max-width: none; display: flex; flex-direction: column; gap: 12px; }
.jn-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border-hairline); background: var(--vt-sandstone-30); }
.jn-figure figcaption { max-width: var(--measure); }

.jn-article-foot {
  margin-top: clamp(40px, 6vw, 64px); padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted);
}

/* ---- More, and the tail ---- */
.jn-more { background: var(--surface-sunken); padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--border-hairline); }
.jn-more .eyebrow { margin-bottom: var(--space-4); }
.jn-more-title {
  margin: 0 0 clamp(24px, 3vw, 32px); font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-heading);
}

/* The one commercial moment on the page. Every piece before opening exists
   to turn attention into a reservation or an address on the list; this is
   where it asks, once, on the estate's own green. */
.jn-tail { background: var(--vt-eucalyptus); padding: clamp(56px, 9vw, 104px) 0; }
.jn-tail .jn-wrap { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.jn-tail-title {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(36px, 6vw, 64px); line-height: 0.98; letter-spacing: var(--tracking-display); color: var(--vt-bone);
}
.jn-tail-copy { margin: 0; max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body-l); color: var(--text-on-dark); }
.jn-tail-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }

/* ---- Footer ---- */
.jn-footer { background: var(--vt-eucalyptus-dark); padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 40px) 40px; }
.jn-footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.jn-footer-mark { height: clamp(48px, 5vw, 68px); width: auto; display: block; }
.jn-footer-block { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-on-dark); }
.jn-footer-block a { color: var(--vt-bone); border-bottom: 1px solid var(--border-on-dark); }
.jn-footer-block a.eyebrow { border-bottom-color: transparent; }
@media (hover: hover) { .jn-footer-block a:hover { color: var(--vt-bone); border-bottom-color: var(--vt-bone); } }
.jn-footer-social, .jn-footer-nav { display: flex; gap: 20px 28px; flex-wrap: wrap; }
.jn-footer-block .caption { max-width: 46ch; }
.jn-footer-fine { font-size: var(--fs-caption); line-height: var(--lh-caption); color: rgba(245,242,235,.38); margin-top: var(--space-2); }

/* ---- Narrower ---- */
@media (max-width: 760px) {
  .jn-card:has(.jn-card-media) { grid-template-columns: minmax(0, 1fr); }
  .jn-card-media { aspect-ratio: 16 / 10; }
  .jn-prose { font-size: 17px; }
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .jn-card-media img { transition: none; }
}