@charset "utf-8";
/* ==========================================================================
   Hostonym — the journal.

   Dated pieces rather than evergreen explainers, so the furniture differs from
   the guides in exactly two ways: a topic chip and a date. Everything else
   reuses the guide typography, because an article and a guide should read the
   same once you are inside them.

   Tokens only. No new colour, no new family, no new scale step.
   ========================================================================== */

.jn-topic{
  display:inline-block;padding:2px 7px;
  border:1px solid var(--rule-2);
  font:500 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);
}

/* ------------------------------------------------------------- the latest */

.jn-lead{
  display:grid;grid-template-columns:1fr 1.45fr;align-items:stretch;
  border:1px solid var(--rule);border-top:2px solid var(--brass);
  background:var(--paper);overflow:hidden;
}
.jn-lead-i{display:block;position:relative;min-height:230px;overflow:hidden}
.jn-lead-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jn-lead-i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,var(--paper) 0,transparent 40%);
}
.jn-lead-b{padding:clamp(20px,2.8vw,38px);display:flex;flex-direction:column}

.jn-lead-k{
  display:flex;align-items:center;gap:11px;margin:0;
  font:500 var(--fs-micro)/1.4 var(--f-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}
.jn-lead-t{
  margin:12px 0 0;
  font:600 clamp(1.35rem,2.4vw,2rem)/1.18 var(--f-serif);
  letter-spacing:-.025em;color:var(--ink);
}
.jn-lead-t a{color:inherit;text-decoration:none}
.jn-lead-t a:hover{color:var(--brass)}
.jn-lead-d{margin:12px 0 0;font:400 var(--fs-base)/1.65 var(--f-sans);color:var(--slate)}
.jn-lead-m{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:auto 0 0;padding-top:18px;
  font:400 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);
}
.jn-lead-m .lnk{
  margin-inline-start:auto;font-family:var(--f-sans);letter-spacing:0;
  text-transform:none;font-size:var(--fs-sm);
}

@media (max-width:820px){
  .jn-lead{grid-template-columns:1fr}
  .jn-lead-i{min-height:172px}
  .jn-lead-i::after{background:linear-gradient(0deg,var(--paper) 0,transparent 52%)}
}

/* ---------------------------------------------------------------- the list */

.jn-grid{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule)}
.jn-card{background:var(--paper)}
.jn-card-a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:clamp(14px,2vw,26px);padding:clamp(17px,2.2vw,26px);
  text-decoration:none;transition:background .16s var(--ease);
}
.jn-card-a:hover{background:var(--paper-2)}
.jn-card-a:hover .jn-card-t{color:var(--brass)}
.jn-card-a:hover .jn-card-go{transform:translateX(3px);border-color:var(--brass)}

.jn-card-n{font:400 var(--fs-sm)/1 var(--f-mono);color:var(--rule-2);padding-top:.4em;letter-spacing:.06em}
.is-lead .jn-card-n{color:var(--brass)}

.jn-card-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.jn-card-k{
  display:flex;align-items:center;gap:10px;
  font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);
}
.jn-card-t{
  font:600 clamp(1.02rem,1.5vw,1.22rem)/1.3 var(--f-serif);
  letter-spacing:-.015em;color:var(--ink);transition:color .16s var(--ease);
}
.jn-card-d{font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--slate);max-width:74ch}
.jn-card-m{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:3px;
  font:400 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}
.jn-card-m span{position:relative}
.jn-card-m span+span::before{
  content:"";position:absolute;inset-inline-start:-8px;top:.42em;
  width:2px;height:2px;border-radius:50%;background:var(--rule-2);
}
.jn-card-go{
  align-self:center;width:26px;height:26px;flex:0 0 auto;position:relative;
  border:1px solid var(--rule-2);border-radius:50%;
  transition:transform .16s var(--ease),border-color .16s var(--ease);
}
.jn-card-go::after{
  content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;
  border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);color:var(--mute);
}
@media (max-width:560px){
  .jn-card-a{grid-template-columns:auto 1fr}
  .jn-card-go{display:none}
}

/* ------------------------------------------------------- inside an article */

/* The provenance line at the foot of the body. It is the whole claim of the
   series in one sentence, so it is set apart rather than dropped in. */
.jn-stamp{
  margin:clamp(26px,3vw,38px) 0 0;padding:14px 0 0;
  border-top:1px solid var(--rule);
  font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--mute);font-style:italic;
}

.jn-more{
  margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.jn-more-a{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:clamp(14px,1.8vw,20px);background:var(--paper);
  text-decoration:none;transition:background .16s var(--ease);
}
.jn-more-a:hover{background:var(--paper-2)}
.jn-more-a:hover .jn-more-t{color:var(--brass)}
.jn-more-k{
  font:500 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);
}
.jn-more-t{
  font:600 1.0125rem/1.3 var(--f-serif);letter-spacing:-.01em;color:var(--ink);
  transition:color .16s var(--ease);
}
.jn-more-d{font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--slate)}
.jn-more-m{
  margin-top:auto;padding-top:9px;
  font:400 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}

/* --------------------------------------------------------------- onward */

.jn-next{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}
.jn-next-c{
  display:flex;flex-direction:column;padding:clamp(18px,2.4vw,30px);
  background:var(--paper);border:1px solid var(--rule);text-decoration:none;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.jn-next-c:hover{border-color:var(--ink);transform:translateY(-2px)}
.jn-next-c:hover .lnk{color:var(--brass)}
.jn-next-t{
  margin:8px 0 0;font:600 clamp(1.08rem,1.6vw,1.3rem)/1.28 var(--f-serif);
  letter-spacing:-.015em;color:var(--ink);
}
.jn-next-d{margin:9px 0 18px;font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--slate)}
.jn-next-c .lnk{margin-top:auto;transition:color .16s var(--ease)}

/* ------------------------------------------------------------------ rtl */

[dir="rtl"] .jn-card-go::after{transform:rotate(225deg) translate(-1px,1px)}
[dir="rtl"] .jn-lead-i::after{background:linear-gradient(90deg,var(--paper) 0,transparent 40%)}