/* ==========================================================================
   Nishtech 2026 — BLOG ARTICLE
   --------------------------------------------------------------------------
   Loads after blog-2026.css and depends on it: the related-reading cards are
   the blog landing's cards, unchanged. This file adds the header, the prose
   column and the author card.

   Everything colour is a --th-* token, so the article inherits both contrast
   states and the gradient with no dark-mode block of its own.
   ========================================================================== */

.art{
  background:var(--th-surface);
  /* The article frame is 1440, not the site's 1920.
     `.container` reads --content, so redeclaring it here retargets every
     container inside the article — header, hero and body all land on the same
     frame with no per-block width to keep in sync. 90rem = 1440px.

     Everything below 1440 is already handled: .container is
     min(100% - gutter*2, --content), so it goes fluid with the standard gutters
     and needs no breakpoints of its own. */
  --content:90rem;

  /* The content fills the frame. The frame's own gutters are the margin, so
     the prose, the headline and the hero image all run the same width and the
     page has no dead column down the right.

     This went 72ch (680px) -> 52rem (832px) -> full frame. The first two both
     left a gap beside the text that read as a layout fault rather than as
     white space, because the hero image directly above was running the full
     width and setting the eye's expectation for where the text should end.

     THE TRADE, STATED PLAINLY: at 1440 the frame is 1348px, which is about 150
     characters per line — roughly double the 66-80 that long-form typography
     recommends. That is a deliberate call in favour of the layout reading as
     intentional. The line height is 1.78 to compensate, which is generous and
     does most of the work of keeping the eye on the right line.

     This is the single knob. Set --art-measure back to min(100%,52rem) for a
     92-character line, or min(100%,44rem) for 78, and every block that uses it
     — prose, headline, author bio — follows. */
  --art-measure:100%;
}


/* ==========================================================================
   1. HEADER
   --------------------------------------------------------------------------
   Carries the same top-right wash as every other hero. Not a .lp-hero: that
   class brings the 78px display size, which is right for a two-word section
   title and much too big for a 96-character article headline.
   ========================================================================== */
.art-head{
  position:relative;isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(2rem,3.9vw,6.25rem)) clamp(1.5rem,2.3vw,3.75rem);
}
.art-head::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(var(--th-b-rx) var(--th-b-ry) at 63% -7.5%,
      rgb(255 255 255 / var(--th-lift)) 0%, rgb(255 255 255 / 0) 95%),
    radial-gradient(var(--th-b-rx) var(--th-b-ry) at 63% -7.5%,
      rgb(var(--th-b-rgb) / var(--th-wash)) 0%, rgb(var(--th-b-rgb) / 0) 95%),
    radial-gradient(var(--th-a-rx) var(--th-a-ry) at 82% -20%,
      rgb(var(--th-a-rgb) / var(--th-wash)) 0%, rgb(var(--th-a-rgb) / 0) 95%);
}
/* NOTE, because this bit bit me: .art-head__inner, .art-body__inner and
   .art-author__inner are not blocks *inside* a container — they carry the
   `container` class themselves. Overriding margin-inline to 0 on them therefore
   defeats `.container`'s own auto-centring and pins the entire frame to the
   left edge of the viewport, which is exactly what happened.

   So the frame stays centred and the *children* get the measure. That is what
   gives the article one left spine — breadcrumb, headline, prose and the left
   edge of the hero image all on the same vertical — without touching the
   centring that puts the 1440 frame where it belongs. */

.art-crumb{
  display:flex;align-items:center;gap:.6em;
  font-size:var(--fs-kicker);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-title);
  margin-bottom:clamp(.75rem,1.09vw,1.75rem);
}
.art-crumb a{color:var(--active-orange)}
.art-crumb a:hover{text-decoration:underline}
.art-crumb span[aria-hidden]{opacity:.5}

/* Between the landing's 52px display and the hero's 78px. An article headline
   runs to 96 characters here, where a section title runs to 12. */
.art-title{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.875rem,2.66vw,4.25rem);line-height:1.08;
  color:var(--th-ink);margin:0;
  /* Full frame, same as everything else. RomanaT averages 0.408em per
     character, so at the 68px cap the longest headline in the set — 96
     characters — needs two lines at 1348 and never more than three. */
  max-width:var(--art-measure);
}

.art-by{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5em;
  margin:clamp(1rem,1.4vw,2.25rem) 0 0;
  font-size:var(--fs-body);color:var(--th-ink-body);
}
.art-by__label{opacity:.7}
.art-by__name{font-weight:700;color:var(--th-ink)}
.art-by__sep{opacity:.4}
.art-by__date{opacity:.7}

.art-tags{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:clamp(.875rem,1.25vw,2rem) 0 0;list-style:none;padding:0;
}
.art-tag{
  display:inline-block;padding:.35em .9em;border-radius:999px;
  border:1px solid var(--th-rule);
  font-size:var(--fs-kicker);font-weight:700;
  color:var(--th-ink-body);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.art-tag:hover{border-color:var(--active-orange);color:var(--active-orange)}


/* ==========================================================================
   2. HEADER IMAGE
   ========================================================================== */
.art-hero{margin:0;padding-block:clamp(1rem,1.56vw,2.5rem)}
.art-hero img{
  display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  border-radius:var(--r-sm);
}
@media (max-width:767.98px){
  .art-hero img{aspect-ratio:16/10}
}


/* ==========================================================================
   3. PROSE
   --------------------------------------------------------------------------
   One measure for the whole article, set on .art as --art-measure and shared
   with the author card so the two never drift apart.

   Left-aligned rather than centred, so the first line of prose starts on the
   same vertical as the breadcrumb, the headline and the left edge of the hero
   image. That single spine is what the 1440 frame is for.
   ========================================================================== */
.art-body{padding-block:clamp(1.5rem,2.3vw,3.75rem) clamp(2.5rem,4.3vw,6.875rem)}
.art-body__inner{
  font-size:var(--fs-body);line-height:1.78;color:var(--th-ink-body);
}
/* The measure goes on the prose blocks, not on the container that holds them.
   Each one is a block with a max-width and no auto margin, so they all start
   at the frame's left edge and stop at the measure. */
.art-body__inner > *{max-width:var(--art-measure)}
.art-body__inner > * + *{margin-top:1.15em}

.art-body__inner h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,1.72vw,2.75rem);line-height:1.18;
  color:var(--th-ink);margin-top:2em;
}
.art-body__inner h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,1.25vw,2rem);line-height:1.22;
  color:var(--th-ink);margin-top:1.7em;
}
.art-body__inner h4{
  font-size:var(--fs-h6);font-weight:700;color:var(--th-ink);margin-top:1.5em;
}
/* A heading immediately after another heading should not inherit the big
   top margin meant to separate it from prose. */
.art-body__inner h2 + h3,.art-body__inner h3 + h4{margin-top:.6em}

.art-body__inner a{
  color:var(--active-orange);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
.art-body__inner a:hover{text-decoration-thickness:2px}
.art-body__inner strong{font-weight:700;color:var(--th-ink)}

.art-body__inner ul,.art-body__inner ol{
  padding-left:1.4em;display:flex;flex-direction:column;gap:.5em;
}
.art-body__inner ul{list-style:disc}
.art-body__inner ol{list-style:decimal}
.art-body__inner li{padding-left:.2em}
.art-body__inner li::marker{color:var(--active-orange)}

.art-body__inner blockquote{
  margin-inline:0;padding-left:clamp(1rem,1.4vw,2.25rem);
  border-left:3px solid transparent;
  border-image:var(--th-grad-v) 1;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.25vw,2rem);line-height:1.35;
  color:var(--th-ink);
}


/* ==========================================================================
   4. AUTHOR CARD
   ========================================================================== */
.art-author{background:var(--th-surface-2);padding-block:clamp(2rem,3.1vw,5rem)}
.art-author__inner{
  display:flex;gap:clamp(1.25rem,2.03vw,3.25rem);align-items:flex-start;
}
/* Circular portrait in a brand-gradient ring — the same construction About's
   team cards use, so the two read as one system. */
.art-author__photo{
  width:clamp(72px,7.03vw,112px);aspect-ratio:1;flex:none;
  border-radius:50%;padding:2px;object-fit:cover;
  background:var(--th-grad);
}
/* The bio follows the same measure as the prose, so the author card lines up
   with the article above it rather than being its own width. */
.art-author__text{max-width:var(--art-measure)}
.art-author__kicker{
  font-size:var(--fs-kicker);font-weight:800;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent-title);margin:0;
}
.art-author__name{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h5);line-height:1.2;color:var(--th-ink);margin:.35rem 0 0;
}
.art-author__role{
  font-size:var(--fs-small);font-weight:700;color:var(--active-orange);margin:.2rem 0 0;
}
.art-author__bio{
  font-size:var(--fs-small);line-height:var(--lh-body);
  color:var(--th-ink-body);margin:.75rem 0 0;
}
@media (max-width:559.98px){
  .art-author__inner{flex-direction:column;align-items:flex-start}
}


/* ==========================================================================
   5. RELATED
   --------------------------------------------------------------------------
   The blog landing's grid at four across instead of six, which is the width
   these cards want when they are a footer rather than the page.
   ========================================================================== */
.art-related{border-top:1px solid var(--th-rule)}
.art-related__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,2.3vw,3.75rem);
}
.art-related__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199.98px){ .art-related__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767.98px){  .art-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:419.98px){  .art-related__grid{grid-template-columns:1fr} }