/* ─────────────────────────────────────────────────────────
   JOURNAL
   Its own stylesheet rather than a copy of the page's. The
   journal needs the tokens, the bar and the footer and none
   of the rail, plates, form, panels or marquees — carrying
   all of that into every post would mean 40KB of dead CSS
   per article and a design change meaning an edit in every
   file. Tokens below are the same values as the trade page:
   if you change them there, change them here.
   ───────────────────────────────────────────────────────── */
@font-face{font-family:"ALT Riviera";src:url("/fonts/ALTRiviera-Regular.woff2") format("woff2"),url("/fonts/ALTRiviera-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ALT Riviera";src:url("/fonts/ALTRiviera-Medium.woff2") format("woff2"),url("/fonts/ALTRiviera-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"ALT Riviera";src:url("/fonts/ALTRiviera-MediumItalic.woff2") format("woff2"),url("/fonts/ALTRiviera-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}

:root{
  --ink:#000;
  --paper:#fff;
  --hair:#d6d6d6;
  --blue:#0000FF;
  --mute:#6b6b6b;

  --f:"ALT Riviera","Helvetica Neue",Arial,sans-serif;
  --lead:1.2;
  --phi:1.618;

  --t-s:14px;
  --t-m:calc(var(--t-s) * var(--phi));
  --t-l:clamp(38px,5.4vw,72px);

  /* article subheads take the wordmark's size — already a rung on the
     ladder, so nothing new is invented for the journal */
  --mark:calc(var(--t-s) * var(--phi) * var(--phi));
  --mark-lift:-0.075em;
  --bar-h:calc(var(--mark) * 1.86);

  --gut:clamp(20px,4.2vw,54px);
  --stack:clamp(64px,9vw,140px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable;background:var(--blue)}
html,body{overflow-x:hidden}
@keyframes lit{from{opacity:0}to{opacity:1}}
body{
  opacity:0;animation:lit .6s ease .04s forwards;
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:var(--t-m);font-weight:400;line-height:var(--lead);
  letter-spacing:-0.005em;font-variant-numeric:tabular-nums;
  font-synthesis:none;-webkit-font-synthesis:none;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{max-width:1500px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.label{text-transform:uppercase;font-weight:400;font-size:var(--t-s);letter-spacing:0.14em;line-height:1;color:var(--mute)}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:120;background:var(--ink);color:var(--paper);padding:12px 16px;font-size:var(--t-s);transition:top .16s ease}
.skip:focus{top:0}

/* ── header, the same mark in the same place ─────────────── */
.bars{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper)}
.nav{display:flex;align-items:center;justify-content:center;height:var(--bar-h)}
.nav .logo{font-size:var(--mark);letter-spacing:-0.024em;line-height:1;position:relative;top:var(--mark-lift)}
main{padding-top:var(--bar-h)}

/* ── the index ───────────────────────────────────────────── */
.jhead{padding-top:calc(var(--stack) * 1.2);padding-bottom:clamp(34px,4.6vw,64px)}
.jhead h1{font-size:var(--t-l);line-height:0.88;letter-spacing:-0.034em;font-weight:500}
.jhead p{color:var(--mute);max-width:40ch;margin-top:clamp(18px,2.2vw,30px)}

.jlist{padding-bottom:var(--stack)}
/* Each entry on the site's own split: the number and date in the aside
   column, the writing in the form's. Same .85/1.15 the trade page uses, so
   the journal lines up with it rather than inventing its own grid. */
.jitem{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(28px,5vw,80px);align-items:start;
  padding:clamp(30px,4vw,56px) 0;border-top:1px solid var(--hair);
}
.jitem:last-child{border-bottom:1px solid var(--hair)}
.jnum{font-size:var(--mark);line-height:1;letter-spacing:-0.02em;color:var(--blue);font-weight:500}
.jitem .meta{margin-top:14px}
.jitem h2{
  font-size:var(--t-l);line-height:0.92;letter-spacing:-0.032em;font-weight:500;
  max-width:18ch;transition:color .18s ease;
}
.jitem:hover h2{color:var(--blue)}
.jitem p{color:var(--mute);max-width:52ch;margin-top:clamp(16px,2vw,26px)}
.jgo{display:inline-flex;align-items:baseline;gap:.5em;color:var(--blue);margin-top:clamp(18px,2.2vw,28px)}
.jgo span{display:inline-block;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.jitem:hover .jgo span{transform:translateX(5px)}
@media(max-width:900px){
  .jitem{grid-template-columns:1fr;row-gap:18px}
  .jitem h2{max-width:none}
}

/* ── the article ────────────────────────────────────────── */
.post{padding-top:calc(var(--stack) * 1.2)}
/* max-width in ch belongs on the element whose size it is measuring. On the
   wrapper it resolved against the inherited body size and squeezed a 72px
   headline into a 283px column — seven lines of two words. */
.post__head{margin-bottom:clamp(30px,4vw,56px)}
.post__head h1{font-size:var(--t-l);line-height:0.88;letter-spacing:-0.034em;font-weight:500;max-width:19ch}
.post__head .meta{margin-bottom:clamp(18px,2.4vw,30px)}
.post__lede{
  font-size:var(--mark);line-height:1.18;letter-spacing:-0.02em;
  max-width:30ch;margin-top:clamp(26px,3.4vw,46px);
}

/* the picture runs the width of the page, the way they do on the trade
   page, with the column's own left inset preserved so the type above it
   still lines up */
.post__ph{
  --edge:max(var(--gut),calc((100% - 1500px) / 2 + var(--gut)));
  position:relative;overflow:hidden;background:var(--field,#f2f2f2);
  aspect-ratio:16/9;max-height:72vh;margin:clamp(40px,6vw,90px) 0;
}
.post__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:phin .45s ease both}
@keyframes phin{from{opacity:0}to{opacity:1}}

/* 62ch is the measure. Long-form is the only place on this site with real
   reading in it, so it gets more leading than the 1.2 everything else runs
   on — 1.2 is right for two lines of a caption and punishing across two
   thousand words. */
.post__body{max-width:62ch;line-height:1.45;padding-bottom:clamp(50px,7vw,110px)}
.post__body > * + *{margin-top:1.05em}
.post__body h2{
  font-size:var(--mark);line-height:1.05;letter-spacing:-0.028em;font-weight:500;
  margin-top:clamp(44px,5.4vw,80px);max-width:18ch;
}
.post__body h2 + p{margin-top:.7em}
.post__body strong{font-weight:500}
.post__body em{font-style:normal;color:var(--mute)}
.post__body ul{list-style:none;padding:0}
.post__body li{padding-left:1.1em;position:relative}
.post__body li + li{margin-top:.45em}
.post__body li::before{content:"";position:absolute;left:0;top:.62em;width:.42em;height:1px;background:var(--blue)}
.post__body a{color:var(--blue);border-bottom:1px solid currentColor;transition:border-color .16s ease}
.post__body a:hover{border-bottom-color:transparent}
.post__body hr{border:0;border-top:1px solid var(--hair);margin:clamp(40px,5vw,72px) 0}

.post__body table{border-collapse:collapse;width:100%;font-size:var(--t-s);text-align:left}
.post__body th,.post__body td{padding:.85em 1em .85em 0;border-bottom:1px solid var(--hair);vertical-align:top}
.post__body th{font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);border-bottom-color:var(--ink)}

.post__end{max-width:62ch;padding-top:clamp(22px,2.8vw,34px);border-top:1px solid var(--hair);font-size:var(--t-s);color:var(--mute);line-height:1.5}
.post__end a{color:var(--blue);border-bottom:1px solid currentColor}
.post__end a:hover{border-bottom-color:transparent}

/* ── the ticker, as on the trade page ────────────────────── */
.runner{background:var(--blue);color:var(--paper);overflow:hidden;padding:clamp(16px,2.4vw,30px) 0;margin-top:var(--stack)}
.runner__run{display:flex;width:max-content;white-space:nowrap;will-change:transform;backface-visibility:hidden;animation:run 8s linear infinite}
@keyframes run{from{transform:translate3d(var(--shift,-50%),0,0)}to{transform:translate3d(0,0,0)}}
.runner__set{display:flex;gap:3.4em;padding-right:3.4em}
.runner__set span{font-size:var(--t-l);line-height:1;letter-spacing:-0.035em;font-weight:500;font-style:italic}

/* ── footer ──────────────────────────────────────────────── */
.foot{padding:var(--stack) 0 clamp(30px,4vw,48px);background:var(--blue);color:var(--paper)}
.foot :focus-visible{outline-color:#fff}
.foot__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,80px);align-items:start}
.foot__logo{grid-column:1;grid-row:1;display:block;font-size:var(--mark);letter-spacing:-0.024em;line-height:1;margin-bottom:16px}
.foot__lede{grid-column:1;grid-row:2}
.foot__say{font-size:var(--t-m);color:rgba(255,255,255,.84);line-height:var(--lead);max-width:26ch;margin:0}
.foot__social{display:flex;gap:1.1em;margin-top:calc(var(--t-m) * var(--lead))}
.foot__cols{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.foot__col a,.foot__social a{
  font:inherit;font-size:var(--t-m);line-height:var(--lead);text-align:left;
  color:rgba(255,255,255,.84);transition:color .16s ease;
}
.foot__col a:hover,.foot__social a:hover{color:#fff}
@media(max-width:900px){
  .foot__grid{grid-template-columns:1fr;row-gap:clamp(26px,5vw,42px)}
  .foot__cols{grid-column:1;grid-row:3}
}
@media(max-width:520px){ .foot__cols{grid-template-columns:1fr;row-gap:clamp(24px,5vw,36px)} }

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}