/* ============================================================
   JUNO PORTALS · mag.css
   The magazine layer.

   Loaded third, after css/styles.css (tokens, type, buttons, fields,
   rules) and about/about.css (wrap, section, plate, statement, litany,
   header, reveal). Nothing from either is redefined here.

   New on this page: an article grid, article cards, the article
   layout and a newsletter.
   ============================================================ */

/* ---------- category rail ----------
   Names on a line, not pills. It scrolls sideways on a phone because
   seven categories will not fit, and that is a deliberate local
   exception to the page's no-sideways rule. */
.categories{
  display:flex;gap:var(--s-4);
  margin-top:var(--s-4);padding-bottom:var(--s-2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.categories::-webkit-scrollbar{display:none}
.categories a,.categories span{
  flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-text);text-decoration:none;
  border-bottom:1px solid transparent;
}
.categories a:hover,.categories a:focus-visible{border-bottom-color:var(--color-accent)}
/* a name without an archive yet · present, not clickable */
.categories span{color:var(--color-disabled);cursor:default}

@media (min-width:760px){
  .categories{flex-wrap:wrap;overflow:visible;gap:var(--s-3) var(--s-5)}
}

/* ---------- the image on a card ----------
   Three by four, which crops cleanly from a two by three Pinterest
   asset. The ratio is fixed so nothing shifts while it loads. */
.card-img{
  width:100%;aspect-ratio:3/4;
  background-color:var(--color-land);
  background-image:var(--plate);
  background-size:cover;background-position:center;
}
.card-img--wide{aspect-ratio:4/5}
@media (min-width:760px){ .card-img--wide{aspect-ratio:16/9} }

/* the placeholder state · obviously unfinished */
.card-img--empty{position:relative}
.card-img--empty::after{
  content:attr(data-note);
  position:absolute;left:var(--s-3);bottom:var(--s-3);right:var(--s-3);
  font-size:10px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}

/* ---------- shared card type ---------- */
.card-kicker{
  display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:baseline;
  margin-top:var(--s-3);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.card-cat{color:var(--color-accent)}
.card-time{color:var(--color-disabled)}
.card-title{
  margin-top:var(--s-2);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  line-height:1.1;font-size:clamp(22px,5.5vw,30px);
}
.card-excerpt{margin-top:var(--s-2);line-height:1.7}
.card-more{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
  margin-top:var(--s-2);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);
}

/* the whole card is the link */
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover .card-title{color:var(--color-accent)}

/* an article that is not published yet · no link, no dead end */
.card[aria-disabled="true"]{opacity:.55}

/* ---------- the grid ---------- */
/* Two columns at most. With a handful of stories, three columns make
   each one small and the row look unfinished; two give every card room
   to be read. Raise it when the archive is deep enough to fill a third. */
.grid{
  display:grid;grid-template-columns:1fr;gap:var(--s-6);
  margin-top:var(--s-5);max-width:900px;
}
@media (min-width:660px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
}

/* ---------- destinations ---------- */
.places{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4) var(--s-3);margin-top:var(--s-5);
}
@media (min-width:900px){ .places{grid-template-columns:repeat(3,minmax(0,1fr))} }

.place-name{
  margin-top:var(--s-3);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:1;font-size:clamp(22px,6vw,32px);
}
.place-country{
  margin-top:2px;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}

/* ---------- the newsletter ---------- */
.signup{margin-top:var(--s-5);max-width:420px}
.signup .btn-stack{margin-top:var(--s-5)}
.signup-note{margin-top:var(--s-3);font-size:13px;line-height:1.5}
.signup-status{margin-top:var(--s-4)}
.signup-status[hidden]{display:none}

/* off screen, never focusable · the spam trap */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px;
}


/* ---------- the magazine masthead ----------
   The masthead needs no size of its own any more: editorial.css sets
   the mark on every editorial page, and makes the header scroll away
   with the page rather than stick, which is what a header this tall
   has to do on a phone. */

/* a card with no photograph · the words take the plate.
   Same shape as .card-img, so a text card holds its place in the grid
   instead of standing short beside a picture. */
.card-plate{
  width:100%;aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-4);
  background:var(--color-folio);
  border:2px solid var(--color-accent);
}
.card-plate span{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:1;text-align:center;
  font-size:clamp(28px,7vw,44px);color:var(--color-accent);
}
a.card:hover .card-plate{background:var(--color-background)}

/* ============================================================
   ARTICLE
   One page pattern for every story. Nothing here is specific to a
   single article: a new one needs this file, editorial.css and
   styles.css, and no CSS of its own.
   ============================================================ */

/* the measure · long prose wants a narrower column than a landing page */
.article{max-width:660px;margin:0 auto;padding:0 var(--pad)}

.article-head{padding-top:var(--s-6);padding-bottom:var(--s-5)}
.article-kicker{
  display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:baseline;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.article-kicker .cat{color:var(--color-accent)}
.article-kicker .meta{color:var(--color-disabled)}

.article-title{
  margin-top:var(--s-4);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  line-height:1.02;font-size:clamp(34px,9vw,64px);
}
.article-standfirst{margin-top:var(--s-4);font-size:18px;line-height:1.65}

/* ---------- prose ----------
   Scoped, so the article can use plain h2, h3, p, ul and blockquote
   without a class on every line. */
.prose{padding-bottom:var(--s-6)}
.prose > p{margin-top:var(--s-4);line-height:1.8;font-size:17px}
.prose > p:first-child{margin-top:0}

.prose h2{
  margin-top:var(--s-7);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  line-height:1.05;font-size:clamp(28px,7vw,44px);
}
.prose h3{
  margin-top:var(--s-6);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  line-height:1.1;font-size:clamp(24px,6vw,34px);
}
.prose h2 + p,.prose h3 + p{margin-top:var(--s-3)}

/* the one line under a city heading */
.prose .best-for{
  margin-top:var(--s-2);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);
}

/* the closing line of a city · a held sentence, not a pull quote */
.prose .verdict{
  margin-top:var(--s-4);padding-left:var(--s-4);
  border-left:1px solid var(--color-accent);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:clamp(20px,5vw,26px);line-height:1.3;
}

/* a sentence given the whole column */
.prose blockquote{
  margin:var(--s-6) 0;
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:clamp(26px,7vw,40px);line-height:1.12;color:var(--color-text);
}

.prose ul:not(.jump-list){margin-top:var(--s-4);list-style:none}
.prose ul:not(.jump-list) li{
  padding:var(--s-3) 0;border-top:1px solid var(--color-line-soft);
  line-height:1.7;
}
.prose ul:not(.jump-list) li:last-child{border-bottom:1px solid var(--color-line-soft)}

.prose hr{
  border:0;border-top:1px solid var(--color-line-soft);
  margin:var(--s-6) 0;
}

.prose a{color:var(--color-accent)}

/* ---------- the index of a long piece ----------
   A contents page, not a row of tags. One name per line, its number
   quiet in front of it, a hairline between. Two columns once there is
   room for two. */
.jump{margin:var(--s-5) 0;padding-top:var(--s-4);
  border-top:1px solid var(--color-line-soft)}
.jump-label{
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}

.jump-list{
  display:grid;grid-template-columns:1fr;
  column-gap:var(--s-5);
  margin-top:var(--s-3);list-style:none;
}
@media (min-width:520px){ .jump-list{grid-template-columns:repeat(2,minmax(0,1fr))} }

.jump-list li{margin:0;padding:0;border:0}
.jump-list a{
  display:flex;align-items:baseline;gap:var(--s-3);
  min-height:44px;padding:var(--s-2) 0;
  border-bottom:1px solid var(--color-line-soft);
  font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-text);text-decoration:none;
}
.jump-list a:hover,.jump-list a:focus-visible{color:var(--color-accent)}
.jump-no{
  flex:0 0 auto;font-size:11px;font-weight:400;letter-spacing:.1em;
  color:var(--color-disabled);font-variant-numeric:tabular-nums;
}

/* ---------- what follows the article ---------- */
/* longhand on purpose · the shorthand would wipe the horizontal
   padding .article sets, and the section would sit on the edge */
.article-end{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.related{margin-top:var(--s-5)}
/* ---------- the top of an article on a phone ----------
   Kicker, title, standfirst and picture closer together. Was an
   inline <style> in each article; now one rule for all of them. */
@media (max-width:639px){
  .article-kicker{margin-top:24px !important}
  .article-head{margin-top:18px;margin-bottom:0;padding:0}
  .article-title{margin:0 0 14px}
  .article-standfirst{margin:0}
  .plate{margin-top:28px}
  .article.prose{margin-top:28px !important}
}