/* ============================================================
   Rubin5 Studio
   Display: Archivo Black. Body: Urbanist. Both self-hosted,
   the same two faces the original site used.
   Palette: filmic near-black, warm bone, one rust accent (#ff6b4a,
   carried over from the original brand).
   ============================================================ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/urbanist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:      #08080a;
  --ink-2:    #0e0e11;
  --line:     #1f1f1e;   /* hairline rules. Decorative, never a boundary. */
  --line-2:   #2c2c29;   /* quiet borders on things that already read as text */
  /* An input's underline IS the input: if you cannot see it, there is no
     field. #2c2c29 measures 1.43:1 on the ink, which is a rule you can
     only find by clicking around. This is the one border that has to be
     visible, so it gets its own token at 3:1 (WCAG 1.4.11). */
  --line-input: #6e6a60;
  --bone:     #f4f2ec;
  --dim:      #8b867c;
  /* Was #55524a = 2.57:1 — under the 4.5:1 floor, and it is the token
     carrying every 11-14px label on the site, including the contact form.
     Small, tracked, uppercase type is the hardest thing to read on a dark
     ground; it cannot also be the faintest. #7b7870 = 4.54:1. The tier
     below --dim is still legible because size, tracking and weight carry
     it, not colour alone. */
  --faint:    #7b7870;
  --rust:     #ff6b4a;
  --rust-deep:#d4472a;

  --gut: 44px;
  --max: 1240px;
  --nav-h: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* fine filmic grain: texture without weight */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.022em;
  line-height: .94;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--rust); color: #fff; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }

/* ---------- reveal ----------
   16px and one long ease, on the films and the photographs only. The
   restraint is the point: a site that animates its paragraphs reads as a
   theme, a site where the images settle reads as a film.
   .js-reveal is set by js/site.js and nowhere else, so if the script
   fails or never loads, none of this applies and the page is simply
   visible. Never hide content behind a class the HTML sets itself. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Reading pages (the journal posts) carry nothing but a column of
   text, so the page itself narrows to the measure and centres. The
   header and the body then share one axis. Before this, both sat at
   the left edge of a 1240 shell and stranded ~600px of dead space to
   the right of every paragraph. The width resolves to exactly
   .article's 680px measure plus the gutters, so nothing inside needs
   its own centring and the left edges stay flush. */
.wrap.reading { max-width: calc(680px + var(--gut) * 2); }

/* ---------- shared atoms ---------- */
.eyebrow {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.btn {
  display: inline-block;
  padding: 15px 32px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--line-2);
  color: var(--bone);
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.btn:hover { border-color: var(--bone); }
.btn.solid { background: var(--rust); border-color: var(--rust); color: #140602; font-weight: 700; }
.btn.solid:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: #fff; }

/* ---------- nav ----------
   Baked into the page, not floating. A fixed bar dragged the mark
   down the page and sat it on top of the body copy on every long
   read. The mark belongs to the top of the page, so it stays there
   and scrolls away like everything else. */
.topbar {
  position: relative; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut);
}
/* The mark's text is 29px tall, which is a 29px thing to hit with a thumb.
   Padding grows the target to 44 and the negative margin gives the pixels
   back to the layout, so nothing moves. */
.mark {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Archivo Black', sans-serif; font-size: 18px; letter-spacing: .01em;
  padding: 8px 0; margin: -8px 0;
}
.mark .five {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border: 1.5px solid var(--bone); border-radius: 50%;
  font-size: 11px; padding-left: 1px;
}
/* On a phone this button IS the navigation, and it measured 40x36. A 44px
   box, with the icon centred in it and the box pulled back to the gutter
   by half the slack so the rules still line up optically. */
.menu-btn {
  background: none; border: 0; cursor: pointer; line-height: 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-right: -9px;
}

.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #060608;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.overlay.open { opacity: 1; visibility: visible; }
.overlay nav { text-align: center; }
.overlay a {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -.02em;
  padding: 13px 0;
  color: var(--bone);
  transition: color .18s ease;
}
.overlay a:hover, .overlay a[aria-current="page"] { color: var(--rust); }
.overlay .close { position: absolute; top: 26px; right: calc(var(--gut) - 9px); margin-right: 0; }

/* ---------- hero ----------
   Left-aligned, not centred. Centred display type is the single
   loudest "theme" tell; every prestige house in the survey is
   left-aligned or carries no hero copy at all. */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 0 70px;
  position: relative;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 22% 45%, rgba(255,107,74,.055), transparent 72%);
}
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(42px, 8vw, 100px); }
.hero .sub {
  margin: 30px 0 0; font-size: clamp(16px, 1.5vw, 20px); font-weight: 300;
  color: var(--dim); max-width: 460px;
}
/* accent as a rule, never a filled pill */
.hero .bar { width: 88px; height: 2px; background: var(--rust); margin-top: 40px; }
.hero .strip {
  margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500;
}
.hero .ctas { margin-top: 46px; display: flex; gap: 12px; flex-wrap: wrap; }

/* page headers (inner pages) */
.phead { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.phead h1 { font-size: clamp(34px, 5.6vw, 68px); margin-top: 20px; }
.phead .sub { margin-top: 26px; max-width: 560px; color: var(--dim); font-weight: 300; font-size: 18px; }

section { padding: 96px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.shead { margin-bottom: 56px; max-width: 640px; }
.shead h2 { font-size: clamp(26px, 3.4vw, 42px); margin-top: 18px; }
.shead p { color: var(--dim); margin-top: 18px; font-weight: 300; }

/* ---------- proof numbers ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.proof .cell { background: var(--ink); padding: 40px 28px; }
.proof .fig { font-family: 'Archivo Black', sans-serif; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.03em; }
.proof .cap { margin-top: 12px; font-size: 13px; color: var(--dim); font-weight: 300; line-height: 1.45; }
@media (max-width: 900px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof { grid-template-columns: 1fr; } }

/* ---------- video ----------
   No card chrome. Frame, then a hairline rule, then a three tier
   caption: title / what it was for / role. Borrowed from how the
   prestige houses attribute work. A bordered box reads as a theme. */
/* A lead spans the grid. With two films that means two full-width rows,
   which is the right answer anyway: fewer things, larger, further apart
   reads as confidence. A half-width straggler next to a full-width lead
   reads as a grid with an item missing. */
.reels { display: grid; gap: 104px 56px; grid-template-columns: repeat(2, 1fr); }
.reel { display: block; }
.reel.lead { grid-column: 1 / -1; }
@media (max-width: 760px) { .reels { grid-template-columns: 1fr; gap: 64px; } }

.frame {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #17171a 0%, #0a0a0c 72%);
  display: flex; align-items: center; justify-content: center;
}
/* Scope films.
   fight-token.mp4 is a 1100x466 scope image with 76px of black baked into
   the top and bottom of a 16:9 container, while its poster is the same
   image with no bars. In a 16:9 frame that meant the poster filled the
   frame and then the picture visibly shrank and grew bars the instant you
   pressed play. Giving the frame the film's real 2.36 and covering it
   crops exactly the 76px: 1.7799/2.3605 = 0.7540, and the image is
   466/618 = 0.7540 of the height. Zero re-encode, zero quality lost, and
   a filmmaker's site never letterboxes a letterbox. */
.reel.scope .frame { aspect-ratio: 1100 / 466; }
.reel.scope .frame video { object-fit: cover; }
.frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.reel:hover .frame img { transform: scale(1.035); }
/* scrim so the play control holds up over a bright frame */
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,6,8,.42), rgba(6,6,8,.12) 70%);
  transition: opacity .3s ease;
}
.reel:hover .frame::before { opacity: .65; }
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.07);
}
/* Bigger and thinner than before. A heavy ring on a film frame reads as
   a plugin; a wide hairline reads as a cinema. */
.play {
  width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(244,242,236,.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease;
  position: relative; z-index: 2;
}
.play::after {
  content: ""; border-style: solid; border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent var(--bone); margin-left: 4px;
  transition: border-left-color .3s ease;
}
.reel:hover .play { transform: scale(1.06); background: var(--rust); border-color: var(--rust); }
.reel:hover .play::after { border-left-color: #140602; }
.reel:focus-visible .play { background: var(--rust); border-color: var(--rust); }

/* click-to-play: the file is only fetched once someone asks for it,
   so the page weighs a poster frame until then */
.frame video {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; background: #000; border: 0;
}
.frame.playing img, .frame.playing .play { opacity: 0; }
.frame.playing::before { opacity: 0; }

.cap { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; transition: border-color .25s ease; }
.reel:hover .cap { border-color: var(--rust); }
/* the film titles are the page's top-level sections, so they are h2 */
.cap h2 { font-size: clamp(19px, 1.9vw, 27px); }
.reel.lead .cap h2 { font-size: clamp(24px, 2.6vw, 36px); }
.cap .line { font-size: 16.5px; color: var(--dim); font-weight: 300; margin: 10px 0 0; max-width: 46ch; }
.cap .role { font-size: 14px; color: var(--faint); font-weight: 300; margin: 7px 0 0; }

/* ---------- steps (genuinely sequential: the sizzle process) ---------- */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 40px; padding: 44px 0; border-bottom: 1px solid var(--line); align-items: start; }
.step .n { font-family: 'Archivo Black', sans-serif; font-size: 15px; color: var(--rust); letter-spacing: .04em; padding-top: 4px; }
.step h3 { font-size: clamp(20px, 2.2vw, 28px); }
.step p { color: var(--dim); margin: 14px 0 0; font-weight: 300; max-width: 620px; }
@media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: 12px; } }

/* A quiet note under a section: the things that are true but are not
   the work itself. Deliberately not a card and not a callout. */
.aside {
  margin: 72px 0 0; max-width: 58ch;
  color: var(--dim); font-weight: 300; font-size: 16px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.aside a { color: var(--bone); border-bottom: 1px solid var(--line-2); }
.aside a:hover { border-bottom-color: var(--bone); }

/* ---------- prose ---------- */
.prose { max-width: 660px; }
.prose p { margin: 0 0 24px; font-size: 18px; font-weight: 300; color: var(--dim); }
.prose p.lede { font-size: 22px; color: var(--bone); font-weight: 400; line-height: 1.5; }
.prose strong { color: var(--bone); font-weight: 600; }

/* credit list */
.credits { border-top: 1px solid var(--line); margin-top: 8px; }
.credits .row { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.credits .row .what { font-weight: 500; }
.credits .row .what span { display: block; color: var(--dim); font-size: 14.5px; font-weight: 300; margin-top: 5px; }
.credits .row .yr { color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* On a phone the two columns collapsed to 194px of description beside
   120px of "DIRECTOR, EDITOR" — a third of the width spent on the least
   important word in the row, and the sentence shredded into four-word
   lines. The role goes under the title, where it costs nothing. */
@media (max-width: 640px) {
  .credits .row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .credits .row .yr { order: -1; font-size: 11px; }
}

/* ---------- the ranch ----------
   Real photographs of a real place, so they are given room rather than
   thumbnailed. One wide lead, then a quiet 2x2 below it. The frames are
   the only place on the site that carries a radius, which is what marks
   this section as the personal one. */
.ranch { margin: 0; }
.ranch .box {
  position: relative; overflow: hidden;
  border-radius: 6px; background: #16161a;
}
.ranch .box img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ranch .box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.08); border-radius: 6px;
}
.ranch figure { margin: 0; }
.ranch figcaption {
  margin-top: 13px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.ranch-lead .box { aspect-ratio: 3 / 2; }
.ranch-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 44px 24px; margin-top: 44px;
}
.ranch-grid .box { aspect-ratio: 4 / 3; }
/* the house was shot at 938px, so it is never asked to fill a wide slot */
.ranch-grid .box img.soft { image-rendering: auto; }
@media (hover: hover) {
  .ranch figure:hover .box img { transform: scale(1.028); }
}
@media (max-width: 720px) {
  .ranch-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
}

/* ---------- price ---------- */
.pricebox { border: 1px solid var(--line); background: var(--ink-2); padding: 34px 36px; max-width: 620px; }
.pricebox .fig { font-family: 'Archivo Black', sans-serif; font-size: 40px; letter-spacing: -.03em; }
.pricebox p { color: var(--dim); font-weight: 300; margin: 14px 0 0; font-size: 15.5px; }

/* ---------- contact ---------- */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
@media (max-width: 820px) { .cgrid { grid-template-columns: 1fr; gap: 48px; } }
.clinks a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 21px; transition: color .18s ease; }
.clinks a:hover { color: var(--rust); }
.clinks .lab { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
form label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
form input, form select, form textarea {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-input);
  color: var(--bone); font-family: inherit; font-size: 16px; padding: 12px 0; margin-bottom: 28px;
}
form input:focus, form select:focus, form textarea:focus { outline: 0; border-bottom-color: var(--rust); }
form select { appearance: none; -webkit-appearance: none; }
form option { background: var(--ink-2); color: var(--bone); }
form textarea { resize: vertical; min-height: 96px; }
form button { width: 100%; }
.fnote { margin-top: 18px; font-size: 13.5px; color: var(--faint); font-weight: 300; }

/* ---------- footer ----------
   The footer carries the nav now. With the mark baked into the top of
   the page rather than fixed, a reader at the bottom of a long journal
   post has no menu within reach; this gives them one without floating
   anything over the film. */
footer { border-top: 1px solid var(--line); padding: 34px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 14px; }
/* smaller type than the topbar mark, so it needs a little more padding to
   reach the same 44px target */
footer .mark { font-size: 15px; padding: 10px 0; margin: -10px 0; }
footer .mark .five { width: 18px; height: 18px; font-size: 10px; }
footer .fnav { display: flex; gap: 4px 22px; flex-wrap: wrap; }
/* These were 19px tall. They are the only navigation on a long page once
   the mark has scrolled away, so they get a real target: 44px of height
   with the text still sitting on the same line it did before. */
footer .fnav a {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--dim); transition: color .18s ease;
  display: inline-flex; align-items: center; min-height: 44px;
}
footer .fnav a:hover, footer .fnav a[aria-current="page"] { color: var(--bone); }
footer .meta { font-size: 12px; color: var(--faint); display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
footer .meta a:hover { color: var(--rust); }
@media (max-width: 900px) {
  footer .wrap { justify-content: flex-start; }
  footer .fnav { order: 3; width: 100%; }
  footer .meta { order: 4; width: 100%; }
}

@media (max-width: 640px) { :root { --gut: 24px; } }

/* ---------- journal ----------
   Education is what converts this buyer. Every credible player in the
   niche teaches before it sells. Nobody teaches the funding side at all. */
.posts { border-top: 1px solid var(--line); }
.post-link {
  display: grid; grid-template-columns: 150px 1fr; gap: 44px;
  padding: 40px 0; border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.post-link:hover { background: #0d0d10; }
.post-link .kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); font-weight: 600; padding-top: 5px; }
.post-link h2 { font-size: clamp(21px, 2.3vw, 31px); }
.post-link p { color: var(--dim); font-weight: 300; margin: 12px 0 0; max-width: 62ch; font-size: 16px; }
.post-link .go { margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.post-link:hover .go { color: var(--bone); }
@media (max-width: 760px) { .post-link { grid-template-columns: 1fr; gap: 10px; } }

/* article body */
.article { max-width: 680px; }
.article > p { font-size: 18.5px; line-height: 1.78; color: var(--dim); font-weight: 300; margin: 0 0 26px; }
.article > p.lede { font-size: 23px; line-height: 1.55; color: var(--bone); font-weight: 400; margin-bottom: 34px; }
.article h2 {
  font-size: clamp(21px, 2.3vw, 29px); margin: 56px 0 20px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.article h3 { font-family: 'Urbanist', sans-serif; text-transform: none; font-weight: 600; font-size: 19px; letter-spacing: 0; margin: 34px 0 10px; color: var(--bone); }
.article strong { color: var(--bone); font-weight: 600; }
.article a:not(.btn) { color: var(--bone); border-bottom: 1px solid var(--line-2); }
.article a:not(.btn):hover { border-bottom-color: var(--rust); color: var(--rust); }
.article ul { padding-left: 0; list-style: none; margin: 0 0 26px; }
.article li {
  color: var(--dim); font-weight: 300; font-size: 18px; line-height: 1.65;
  padding: 0 0 0 26px; margin-bottom: 13px; position: relative;
}
.article li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--rust); }
.article blockquote {
  margin: 34px 0; padding: 0 0 0 24px; border-left: 2px solid var(--rust);
  font-size: 20px; line-height: 1.55; color: var(--bone); font-weight: 300; font-style: normal;
}
.article blockquote cite { display: block; margin-top: 12px; font-size: 13px; color: var(--faint); font-style: normal; letter-spacing: .04em; }

/* data table */
.tbl-wrap { overflow-x: auto; margin: 0 0 30px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
.tbl th {
  text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 0 18px 12px 0; border-bottom: 1px solid var(--line-2);
}
.tbl td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-weight: 300; vertical-align: top; }
.tbl td:last-child { font-variant-numeric: tabular-nums; color: var(--bone); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

.byline { margin-top: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: flex; gap: 18px; flex-wrap: wrap; }
.callout {
  border: 1px solid var(--line); background: var(--ink-2); padding: 26px 28px; margin: 34px 0;
  font-size: 16.5px; color: var(--dim); font-weight: 300; line-height: 1.65;
}
.callout strong { color: var(--bone); }
.sources { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); font-weight: 300; }
.sources a { color: var(--dim); border-bottom: 1px solid var(--line-2); }
.sources a:hover { color: var(--rust); }