/* Journal: what journal pages add to the essay's styles (css/site.css). */

.kicker{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kicker a{color:inherit}
.kicker i{width:3px;height:3px;border-radius:50%;background:currentColor}
.essay .kicker+h1{margin-top:14px}

/* ---------- Timeline: release to rules removed ---------- */
.tl{padding:26px 28px 22px;border:1px solid var(--rule);border-radius:14px;background:var(--bg)}
.tl__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tl__top span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tl__top b{font:400 56px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.tl__top b small{font:400 var(--fs-s)/1 var(--sans);letter-spacing:0;color:var(--ink-3);margin:0 10px 0 3px}
.tl__top b small:last-child{margin-right:0}
.tl__track{position:relative;height:44px;margin:26px 0 6px}
.tl__track::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--rule)}
.tl__run{position:absolute;left:0;top:20px;height:4px;width:calc(var(--to)*1%);border-radius:2px;background:var(--crit);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.tl.in .tl__run,.static .tl__run{transform:none}
.tl__dot{position:absolute;top:13px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
.tl__dot--end{box-shadow:inset 0 0 0 2px var(--crit);background:var(--crit)}
.tl__ticks{display:flex;justify-content:space-between;font:400 12px/1 ui-monospace,Menlo,monospace;color:var(--ink-3)}
.tl__ev{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.tl__ev div{display:grid;gap:4px;align-content:start}
.tl__ev div:last-child{text-align:right}
.tl__ev time{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tl__ev b{font-weight:500;line-height:1.4}
.tl__ev small{font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
.tl__ev div:last-child b{color:var(--crit)}
.tl__ev img{display:inline-block;width:22px;height:22px;border-radius:6px;vertical-align:-5px;margin-right:8px}

/* ---------- Model card, as its uploader describes it ---------- */
.mc{border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:var(--bg);font-size:14px}
.mc__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--soft)}
.mc__bar img{width:22px;height:22px}
.mc__bar code{font:500 13px ui-monospace,Menlo,monospace;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc__bar code s{text-decoration:none;background:var(--ink);color:transparent;border-radius:3px}
.mc__tags{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px 0}
.mc__tags span{padding:3px 9px;border-radius:999px;font-size:12px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}
.mc__tags span.r{color:var(--crit);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crit) 45%,transparent)}
.mc dl{margin:0;padding:6px 18px 16px;display:grid;grid-template-columns:150px 1fr}
.mc dt,.mc dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule)}
.mc dt{color:var(--ink-3)}
.mc dd{color:var(--ink);line-height:1.45}
.mc dl>:nth-last-child(-n+2){border-bottom:0}
.mc dd b{font-weight:500;color:var(--crit)}

/* ---------- Growth: abliterated models on Hugging Face ---------- */
.gr{display:grid;gap:14px;padding:24px 26px;border:1px solid var(--rule);border-radius:14px}
.gr__row{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.gr__row>span{font-size:var(--fs-s);color:var(--ink-3)}
.gr__bar{position:relative;height:40px}
.gr__bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*1%);border-radius:4px;background:var(--rule-2);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s var(--ease) .15s}
.gr__row--now .gr__bar i{background:var(--ink)}
.gr.in .gr__bar i,.static .gr__bar i{transform:none}
.gr__bar b{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--v)*1% + 12px);font:400 28px/1 var(--serif);color:var(--ink);white-space:nowrap}
.gr__row--now .gr__bar b{left:auto;right:14px;color:var(--bg)}
.gr__bar b small{font:inherit;color:inherit}

/* ---------- Journal index ---------- */
.posts{list-style:none;margin:36px 0 0;padding:0;display:grid}
.posts li{border-top:1px solid var(--rule)}
.posts li:last-child{border-bottom:1px solid var(--rule)}
.posts a{display:grid;grid-template-columns:120px 1fr;gap:6px 24px;padding:26px 0;color:inherit}
.posts time{font-size:var(--fs-s);color:var(--ink-3);padding-top:6px}
.posts b{font:400 var(--fs-h)/1.2 var(--serif);letter-spacing:-.012em;color:var(--ink);transition:opacity .2s}
.posts a:hover b{opacity:.7}
.posts p{grid-column:2;margin:0!important;font:400 var(--fs-t)/1.6 var(--sans)!important;color:var(--ink-3)!important}

.jfoot{margin-top:56px}
.begin small a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-2)}

@media (max-width:760px){
  .tl{padding:20px 18px 18px}
  .tl__top b{font-size:44px}
  .tl__ev{grid-template-columns:1fr;gap:16px}
  .tl__ev div:last-child{text-align:left}
  .mc dl{grid-template-columns:1fr}
  .mc dt{padding:12px 0 0;border:0}
  .mc dd{padding:2px 0 12px}
  .gr{padding:18px}
  .gr__row{grid-template-columns:1fr;gap:6px}
  .posts a{grid-template-columns:1fr}
  .posts p{grid-column:1}
  .posts time{padding:0}
}