/* Symbio Software newsroom — layout for the article index and the article page.
   Loaded after sw.css, which owns the shared shell (header, footer, buttons,
   section rhythm). Addressed at /software/assets/ so it resolves on every
   hostname without being rewritten. */

/* ── topic filter ─────────────────────────────────────────────────────────── */
.topicbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:40px}
.topic{
  font-family:inherit;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--line);border-radius:20px;padding:9px 18px;
  background:#fff;color:var(--body);cursor:pointer;transition:all .18s ease;
}
.topic:hover{border-color:var(--gold);color:var(--navy)}
.topic.on{background:var(--navy);border-color:var(--navy);color:#fbf6ee}

/* ── the lead story ───────────────────────────────────────────────────────── */
.lead{
  display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-bottom:44px;
  background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;
}
.lead:hover{transform:translateY(-3px);box-shadow:0 28px 56px -38px rgba(22,36,61,0.55)}
.lead-art{position:relative;min-height:280px}
.lead-art .cover{position:absolute;inset:0;width:100%;height:100%}
.lead-in{padding:38px 38px 34px;display:flex;flex-direction:column;justify-content:center}
.lead-k{
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold-dk);font-weight:600;margin-bottom:14px;
}
.lead h2{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(26px,3.2vw,38px);line-height:1.14;color:var(--navy);margin-bottom:14px;
}
.lead-x{font-size:16.5px;color:var(--body);line-height:1.62;margin-bottom:18px}
.lead-m{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.lead-cta{
  margin-top:22px;font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:600;color:var(--gold-dk);border-bottom:1px solid var(--gold);
  align-self:flex-start;padding-bottom:3px;
}
@media(max-width:840px){
  .lead{grid-template-columns:1fr}
  .lead-art{min-height:190px}
  .lead-in{padding:28px 24px 26px}
}

/* ── the grid ─────────────────────────────────────────────────────────────── */
.storygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.storygrid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.storygrid{grid-template-columns:1fr}}

.storycard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;
}
.storycard:hover{transform:translateY(-3px);box-shadow:0 24px 46px -34px rgba(22,36,61,0.5)}
.storycard .cover{width:100%;height:150px;display:block}
.storycard-in{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.storycard-k{
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-dk);font-weight:600;margin-bottom:11px;
}
.storycard h3{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:22px;
  line-height:1.2;color:var(--navy);margin-bottom:10px;
}
.storycard-x{font-size:15px;color:var(--body);line-height:1.6;margin-bottom:16px;flex:1}
.storycard-m{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  padding-top:14px;border-top:1px solid rgba(176,141,79,0.18);
}

/* ── the article page ─────────────────────────────────────────────────────── */
.story-head{
  padding:74px 24px 62px;color:#fbf6ee;
  background:radial-gradient(120% 130% at 50% 0%,var(--navy-lift) 0%,var(--navy) 58%,var(--navy-deep) 100%);
}
.story-head-in{max-width:820px;margin:0 auto}
.backlink{
  display:inline-block;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:#cdd6e2;margin-bottom:26px;border-bottom:1px solid transparent;
}
.backlink:hover{color:var(--gold-lt);border-bottom-color:var(--gold)}
.story-kicker{
  font-size:11px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--gold-lt);font-weight:500;margin-bottom:18px;
}
.story-head h1{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.6vw,50px);line-height:1.1;margin-bottom:18px;
}
.story-meta{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#9fb0c9}

.story-cover{max-width:900px;margin:-34px auto 0;padding:0 24px}
/* The generated cover has preserveAspectRatio="none", so without an explicit
   height it renders at the source 640x340 ratio — about 480px tall at desktop
   width, which is a lot of empty navy above the first paragraph. Fix the height
   instead and let the artwork compress into it. */
.story-cover .cover,.story-cover img{
  width:100%;height:230px;object-fit:cover;border-radius:12px;
  box-shadow:0 30px 60px -40px rgba(16,28,48,0.7);display:block;
}
@media(max-width:740px){.story-cover .cover,.story-cover img{height:150px}}

.story-body{max-width:720px;margin:0 auto;padding:52px 24px 20px}
.story-body p{font-size:18px;line-height:1.75;color:var(--body);margin-bottom:24px}
.story-body h2{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(24px,3vw,32px);
  line-height:1.2;color:var(--navy);margin:44px 0 16px;
}
.story-body h3{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:22px;
  line-height:1.25;color:var(--navy);margin:34px 0 12px;
}
.story-body strong{color:var(--navy);font-weight:500}
.story-body blockquote{
  margin:34px 0;padding:4px 0 4px 26px;border-left:2px solid var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:23px;line-height:1.45;color:var(--gold-dk);
}
.story-foot{max-width:720px;margin:0 auto;padding:16px 24px 84px}
@media(max-width:740px){
  .story-head{padding:56px 20px 50px}
  .story-body{padding:40px 20px 16px}
  .story-body p{font-size:17px}
}

/* ── Script-less fallback (card #1430 hour 24) ────────────────────────────────
   The newsroom grid is built in the browser. With scripting off it never builds,
   so the page used to sit on "Loading the newsroom…" for ever while the crawler
   index list underneath rendered as bare bullets squeezed into one grid column.
   These rules only apply while the no-js class is on <html>, which the inline
   script in news.html removes before first paint. */
.no-js #list-state{display:none}
.no-js #topicbar{display:none}        /* the topic filters are buttons; without scripting they do nothing */
.no-js .storygrid{display:block}
.no-js .news-nojs-note{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  color:var(--muted);font-size:19px;margin:0 0 22px
}
.no-js .news-index-list ul{list-style:none;margin:0;padding:0}
.no-js .news-index-list li{border-bottom:1px solid var(--line)}
.no-js .news-index-list li:first-child{border-top:1px solid var(--line)}
.no-js .news-index-list a{
  display:block;padding:17px 0;text-decoration:none;color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:22px;line-height:1.3
}
.no-js .news-index-list a:hover,.no-js .news-index-list a:focus-visible{color:var(--gold-dk)}

/* ── the cover's own edge (card #1430 hour 25) ───────────────────────────────
   The cards carry a hairline but the artwork inside them did not, and the card
   is white. Measured live on /news at 1280: the two dark cover families sit at
   8.45 and 12.74 contrast against the card, and the pale `product` family —
   deliberately the light one, so one topic reads differently from the other two
   — sits at 1.15. Its edge simply was not there, and the card read as though its
   picture had failed to load. A real BORDER, and that detail matters: an inset
   shadow computes correctly here and never PAINTS, because the SVG is a replaced
   element whose own content covers it - the pixels either side of the boundary
   came back byte-identical. `box-sizing:border-box` is global (sw.css line 11),
   so a 1px border costs the artwork 1px and the page nothing: cover boxes stay
   358x150 and the document height is unchanged to the pixel. The
   card's own border already draws this same line down the sides of every cover;
   this completes it on the one edge that was left open. It is drawn on every
   cover, not only the pale one: on the dark families it is the same hairline
   already running beside them, and on the pale one it is the edge. */
.storycard .cover{border-bottom:1px solid var(--line)}
.lead-art .cover{border-right:1px solid var(--line)}
@media(max-width:840px){
  /* the lead stacks at this width, so its open edge becomes the bottom one */
  .lead-art .cover{border-right:0;border-bottom:1px solid var(--line)}
}