@charset "UTF-8";
/* ==========================================================================
   Pakdis — single article
   --------------------------------------------------------------------------
   A standalone sheet for article.html. It introduces no colour, font, radius
   or easing of its own — everything resolves to the tokens in css/style.css.
   The header, footer, .plate, .gallery, .section-head and .link-arrow
   components are used exactly as that sheet defines them.

   What this file adds is the one thing the other pages don't need: a reading
   typography scale. Everything else here (the framed photo with its gold
   hairline, the 2×2 dot mark, the broken-corner pill) is a restatement of a
   move the archive page already makes, at article scale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Article opening
   The photograph *is* the opening. It runs full bleed behind the fixed
   header and carries the headline, using the same scrim + corner-pattern
   treatment the home page's own hero uses — so an article opens the way the
   site opens, rather than in a language of its own.

   Everything sits flush to the reading start edge. A centred masthead reads
   as a poster; an article is a column of text, and the eye should already be
   on the edge it will read down from.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(500px, 74vh, 760px);
  /* Clearance is measured from the header's *bottom* edge, and that edge is
     at --header-drop + --header-h — the bar is fixed 44px down the page, not
     at the top of it. Padding by --header-h alone left the trail 12–18px
     inside the bar rather than below it. */
  padding-block: var(--hero-top) 84px;
  overflow: hidden;
  background: var(--purple-flood);     /* shows while the photo loads */
  isolation: isolate;
}

.page-hero__media { position: absolute; inset: 0; }

.page-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Two gradients, the same construction as .hero__scrim on the home page:
   one flooding the reading-start edge, one weighting the foot. Between them
   the headline never sits on bare photograph, whatever image is dropped in —
   which is the only way an overlaid title is safe on content the designer
   doesn't control. The top stop keeps the transparent nav legible. */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left,
      rgba(66, 42, 116, 0)   34%,
      rgba(66, 42, 116, .82) 66%,
      rgba(66, 42, 116, .94) 86%),
    linear-gradient(to bottom,
      rgba(43, 26, 78, .88)  0%,
      rgba(43, 26, 78, .34) 26%,
      rgba(43, 26, 78, .46) 58%,
      rgba(26, 13, 62, .92) 100%);
}

/* Same corner motif, same size and opacity as the home hero at every
   breakpoint — it is the one element that says which site this is before
   the photograph has even loaded. */
.page-hero__pattern {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 352px;
  height: auto;
  max-width: none;
  opacity: .5;
  pointer-events: none;
}

/* The head sits at the top of the hero, level with every other page's.

   It used to carry `margin-top: auto`, which in a flex column hands it all the
   slack and parks it on the photograph's foot — that is why this page's trail
   was hundreds of pixels lower than the same trail everywhere else. The hero
   keeps its height; the photograph now fills the space below the head instead
   of above it. */
.article-head {
  position: relative;
  z-index: 1;
  /* The head sits lower in the frame than it did. On the other pages the title
     block opens a short band; here it opens a full-height photograph, and
     starting at the same offset left it pinned to the top edge with the whole
     picture below it. */
  padding-top: 52px;
}



/* The category, set as a pill with the identity's one broken corner. It is
   the first thing above the headline because it is the fastest thing to
   read — a reader decides on subject before title. */
.article-head__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid rgb(187 167 96 / .55);
  border-radius: 999px 999px 999px 5px;
  background: rgb(187 167 96 / .16);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
}

/* Size, weight, line-height, colour and measure now come from `.ptitle` in
   css/style.css — this rule holds only what is specific to setting a headline
   on a photograph. Two sources of truth for one headline would mean this
   sheet, loading second, silently overrode the shared component. */
.article-head__title {
  /* No extra top margin: `.ptitle` already reserves the motif's overhang, and
     adding to it only pushed the headline down without moving the rule, which
     is what opened the gap between them. */
  margin-top: 0;
  /* px, not `ch`. `ch` sizes on the "0" glyph, which in Modam is far narrower
     than the Persian letterforms actually set — 26ch resolved to roughly half
     the column intended, so the headline broke to three ragged lines under a
     full-width rule and the proportion collapsed. */
  max-width: min(100%, 880px);
  text-shadow: 0 2px 24px rgba(26, 13, 62, .5);   /* insurance over a busy photo */
}

/* A single gold stroke, flush to the reading edge. The dot cluster belongs
   to the subheads inside the article; repeating it here would spend the
   mark before the reader reaches the text it actually punctuates. */

/* Photo credit, parked on the opposite corner from the headline — the one
   place in the hero nothing else occupies. */
.page-hero__credit {
  position: absolute;
  z-index: 1;
  bottom: 26px;
  inset-inline-end: max(40px, calc((100% - var(--container)) / 2));
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
}

.breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
}
.breadcrumb a { color: rgba(255, 255, 255, .7); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;                      /* RTL: chevron points start-ward */
}

/* --------------------------------------------------------------------------
   1. Reading progress
   Fixed above the header (z 60 clears the header's 50) so it survives the
   sticky bar's own state change. aria-hidden in the markup: a screen reader
   already knows where it is in the document.
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  width: 0;                            /* js/article.js drives this */
  height: 100%;
  background: linear-gradient(to left, var(--gold), #d8c98c);
  /* No transition: the bar reports scroll position, and easing it would make
     it lag behind the thing it reports. */
}

/* --------------------------------------------------------------------------
   2. Fact bar
   The article's own data, after the image. Lapped over the photograph's foot
   so the two read as one opening — the lift is what stops it looking like an
   unrelated strip that happens to follow a banner.
   -------------------------------------------------------------------------- */
.factbar {
  position: relative;
  z-index: 2;
  margin-top: -44px;
}

.factbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 34px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 40px 14px;
  background: #fff;
  box-shadow: 0 30px 60px -34px rgba(30, 16, 60, .32);
}

.byline { display: flex; align-items: center; gap: 14px; flex: none; }

.byline__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 12px;     /* the broken corner at avatar scale */
  background: var(--purple);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

.byline__who { display: flex; flex-direction: column; }
.byline__who em {
  order: -1;                           /* label above the name */
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--grey-600);
}
.byline__who b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--purple);
}

/* -- the facts ------------------------------------------------------------ */
/* A description list, not a row of chips: each value has a label, and the
   label/value pairing is what makes "۹ دقیقه" mean anything on its own. */
.factlist {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  margin-inline-start: auto;
}
.factlist__item {
  position: relative;
  padding-inline-start: 34px;
}
.factlist__item:first-child { padding-inline-start: 0; }
.factlist__item:first-child::before { display: none; }
.factlist__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #ece8f2;
}
.factlist dt {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--grey-600);
}
.factlist dd {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--purple);
  white-space: nowrap;
}

/* -- share ---------------------------------------------------------------- */
.byline__share {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding-inline-start: 32px;
}
.byline__share::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #ece8f2;
}
.byline__share-label {
  margin-inline-end: 6px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--grey-600);
}

/* 44px box, 40px artwork: the two icon assets are footer rasters at 65×70,
   and at that size they read as footer furniture rather than as buttons. */
.share-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.share-btn img { width: 38px; height: 41px; }
.share-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-btn:hover { background: #f5f2f9; transform: translateY(-2px); }

/* Set by js/article.js once the address is on the clipboard — the button has
   to say it worked, or nothing appears to have happened. */
.share-btn--copy.is-copied { background: rgb(187 167 96 / .2); }
.share-btn--copy.is-copied svg { stroke: var(--gold); }

/* --------------------------------------------------------------------------
   4. Body + rail
   -------------------------------------------------------------------------- */
.article-body { padding-block: 88px 96px; }

.article-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 44px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   5. Reading typography
   The one genuinely new system on this page. Body copy is set in --purple
   rather than a grey: the design system's rule is "text on white is purple
   or --ink", and at weight 300 the brand purple measures 9.7:1 on white —
   far past AA — so the page can stay in brand colour without costing
   legibility. --ink would be harsher than a long read wants.

   Measure is capped in `ch` rather than px so it tracks the font size
   through the breakpoints instead of needing a new number at each one.
   -------------------------------------------------------------------------- */
.prose {
  /* No measure cap. The 68ch limit left roughly a third of the column empty
     on a wide screen, which is the one thing a reader notices before they
     notice the type. The column itself now sets the line length, and the
     size goes up a step so the character count per line stays as close to a
     comfortable measure as a full-width column allows. */
  font-size: 18px;
  font-weight: 300;
  line-height: 2.05;
  color: var(--purple);
}
.prose p { margin-bottom: 26px; }
.prose > p:last-child { margin-bottom: 0; }

/* The opening paragraph is set larger and a shade heavier — it's the ramp
   from the banner's standfirst down to body size, not a separate voice. */
.prose__lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.95;
  margin-bottom: 34px;
}

/* -- subheads: the 2×2 dot mark -------------------------------------------
   The four-dot cluster is lifted straight from the brand pattern, where it
   punctuates the line-work at intervals. Reusing it here as the subhead mark
   is the closest this page gets to quoting the identity directly. The rule
   that runs off the end of the heading is the same hairline motif the about
   block and the hero use, fading towards the reading end so it has a
   direction rather than reading as a symmetrical dash. */
.sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0 22px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
  scroll-margin-top: calc(var(--header-h) + 24px);  /* in-page links clear the fixed bar */
}
.sub__mark {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
.sub > span { flex: none; max-width: calc(100% - 36px); }
.sub::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 24px;
  background: linear-gradient(to left, rgb(187 167 96 / .6), rgb(187 167 96 / 0));
}

/* -- key points ----------------------------------------------------------- */
/* A summary box earns its place on a long read: it lets someone decide
   whether to commit before paragraph three. Built on the card's tint, at
   the lightest alpha the palette allows. */
.keypoints {
  margin-bottom: 34px;
  padding: 26px 28px 24px;
  border: 1px solid rgb(187 167 96 / .35);
  border-radius: 14px 14px 32px 14px;
  background: rgb(187 167 96 / .07);
}
.keypoints__title {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gold);
}
.keypoints__list { display: flex; flex-direction: column; gap: 10px; }
.keypoints__list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--purple);
}
/* Square bullets, not round: the pattern's own geometry is built from
   squares and quarter-circles, and a round dot here would be the one shape
   on the page that isn't from the system. */
.keypoints__list li::before {
  content: "";
  position: absolute;
  top: .82em;
  inset-inline-start: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px 2px 2px 0;
  background: var(--gold);
}

/* -- lists ---------------------------------------------------------------- */
.prose__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 30px;
  padding-inline-start: 4px;
}
.prose__list li {
  position: relative;
  padding-inline-start: 26px;
}
.prose__list li::before {
  content: "";
  position: absolute;
  top: .88em;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px 2px 2px 0;
  border: 1.6px solid var(--gold);
}

/* -- pull quote ----------------------------------------------------------- */
/* Purple flood + pattern, i.e. the plate's own material, dropped into the
   column. It's the page's single loudest moment, so there is exactly one. */
.pullquote {
  position: relative;
  overflow: hidden;
  margin: 44px 0;
  padding: 40px 44px 34px;
  border-radius: 16px 16px 44px 16px;
  background: linear-gradient(158deg, var(--purple-flood) 0%, #33206a 60%, #2a1758 100%);
  color: #fff;
}
/* The asset is 4955×1254 — nearly 4:1 — and its leftmost quarter is drawn far
   sparser than the rest (measured: ~5% ink against ~10% across the other
   three). Fitted with `cover` to a box this wide the scale is set by width,
   which leaves zero horizontal slack, so that thin quarter always landed in
   the frame and read as a corner where the pattern had simply stopped.

   Over-tall on purpose: at 260% the scale is set by height instead, the
   render comes out roughly twice the box's width, and `object-position:100%`
   spends that slack on the dense three-quarters. The element is clipped by
   the quote's own overflow, so the extra height costs nothing. */
.pullquote__pattern {
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  translate: 0 -50%;
  width: 100%;
  height: 260%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 50%;
  opacity: .16;
  pointer-events: none;
}

.pullquote p {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.95;
  color: #fff;
}
.pullquote cite {
  position: relative;
  display: block;
  margin-top: 18px;
  padding-inline-start: 34px;
  font-size: 14.5px;
  font-style: normal;
  font-weight: 400;
  color: var(--gold);
}
/* A short gold rule instead of a quotation glyph: the mark belongs to the
   system, a typographic quote mark doesn't. */
.pullquote cite::before {
  content: "";
  position: absolute;
  top: .85em;
  inset-inline-start: 0;
  width: 22px;
  height: 1px;
  background: var(--gold);
}

/* -- in-body figure -------------------------------------------------------- */
.prose-figure { margin: 40px 0; }
.prose-figure__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px 12px 35px 12px;
}
.prose-figure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(187 167 96 / .3);
  border-radius: inherit;
  pointer-events: none;
}
.prose-figure__frame img {
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 380px);
  object-fit: cover;
}
.prose-figure figcaption {
  margin-top: 14px;
  padding-inline-start: 18px;
  border-inline-start: 2px solid rgb(187 167 96 / .55);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-600);
}

/* -- tags ------------------------------------------------------------------ */
.prose__foot {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid #ece8f2;
}
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags a {
  display: block;
  padding: 9px 16px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px 999px 999px 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--purple);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.tags a:hover {
  border-color: var(--gold);
  background: rgb(187 167 96 / .1);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Rail — most-read
   -------------------------------------------------------------------------- */
.rail { position: relative; }

/* Both blocks live inside one sticky container, so they travel together and
   both stay on screen — two siblings each given `position: sticky` with the
   same `top` would simply stack on the same line and overlap.

   The max-height is the load-bearing part. Sticky silently stops working the
   moment its element is taller than the space between `top` and the viewport
   floor: the box just scrolls away like static content. Capping the rail to
   the viewport it has left, and letting it scroll internally past that,
   keeps it pinned no matter how many items either list grows to — otherwise
   adding one more news item could quietly un-stick the whole column. */
/* Both blocks live inside one sticky container so they travel together —
   two siblings each given `position: sticky` with the same `top` would just
   stack on the same line and overlap.

   No height cap and no inner scroll: a scrollbar inside a sidebar is a second
   scroll surface competing with the page's own, and it was solving a problem
   that only appeared when the rail carried three blocks. With two it fits the
   viewport on ordinary desktops; where it doesn't, it simply scrolls away
   with the page, which is the normal, undistracting fallback. */
.rail__inner {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  padding: 28px 26px 26px;
  border: 1px solid #ece8f2;
  border-radius: 16px 16px 40px 16px;
  background: linear-gradient(180deg, #fbfafd 0%, #fff 55%);
}
/* The two lists are separated by a rule rather than by a gap alone — in a
   single bordered card, whitespace on its own reads as a paragraph break,
   not as the end of one section and the start of another. */
.rail__block + .rail__block {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #ece8f2;
}

.rail__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
}
.rail__title .sub__mark { width: 18px; height: 18px; }
.rail__title > span { flex: none; }
.rail__title::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 16px;
  background: linear-gradient(to left, rgb(187 167 96 / .6), rgb(187 167 96 / 0));
}

.popular { display: flex; flex-direction: column; }
.popular__item + .popular__item { border-top: 1px solid #f1eef6; }

.popular__link {
  display: grid;
  grid-template-columns: auto 68px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  transition: transform .25s var(--ease);
}
.popular__item:first-child .popular__link { padding-top: 0; }
.popular__item:last-child  .popular__link { padding-bottom: 0; }
.popular__link:hover { transform: translateX(4px); }   /* RTL: nudges start-ward */

/* The rank is the list's only ornament, so it carries the gold and steps
   back to a hairline outline rather than a filled chip — five filled gold
   badges in a column would out-shout the titles they're numbering. */
.popular__rank {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: rgb(187 167 96 / .85);
}

.popular__thumb {
  display: block;
  overflow: hidden;
  width: 68px;
  height: 52px;
  border-radius: 8px 8px 18px 8px;
}
.popular__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.popular__link:hover .popular__thumb img { transform: scale(1.06); }

.popular__body { display: block; min-width: 0; }
.popular__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.popular__link:hover .popular__title { color: var(--purple); }
/* --grey-600 rather than the --grey-400 the card dates use: at 12px on white
   that token measures 2.85:1, and this line carries the date and length a
   reader is choosing between. Same reasoning as .comment__date. */
.popular__meta {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  color: var(--grey-600);
}

.rail__more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1eef6;
  font-size: 15px;
}
.rail__more:hover { color: var(--purple); }

/* -- latest news ----------------------------------------------------------
   Same materials as the list above, arranged differently on purpose: a wider
   image, no rank, and the date promoted above the title. Two lists with an
   identical silhouette stacked in one card would read as one list with a
   stray heading dropped into the middle of it. */
.news { display: flex; flex-direction: column; gap: 16px; }
.news__item { min-width: 0; }          /* long titles clip, not stretch the card */

.news__link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  transition: transform .25s var(--ease);
}
.news__link:hover { transform: translateX(4px); }   /* RTL: nudges start-ward */

.news__thumb {
  display: block;
  overflow: hidden;
  width: 76px;
  height: 58px;
  /* The card silhouette at its smallest — the one broken corner survives even
     at thumbnail size, which is what keeps it part of the system. */
  border-radius: 8px 8px 20px 8px;
}
.news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.news__link:hover .news__thumb img { transform: scale(1.06); }

.news__body { display: block; min-width: 0; }

/* Gold, and set above the title rather than beneath it: for news the date is
   the point — it's what makes "latest" mean anything. */
.news__date {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  /* The brand gold reads 2.4:1 on white — nowhere near usable for 11.5px
     type. Same hue, darkened only as far as it takes to clear 4.5:1. */
  color: #847132;
}

.news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.news__link:hover .news__title { color: var(--purple); }

/* --------------------------------------------------------------------------
   7. Brands, in the rail
   A list, not a grid of marks: each brand carries a line saying what it
   actually sells. A logo alone assumes the reader already recognises it,
   which on an article page — where they arrived for the writing, not the
   catalogue — is the wrong assumption.

   The silhouette deliberately matches the two lists above it: artwork on the
   reading edge, text beside it, hairline between rows. Three lists that
   behave the same way read as one considered column; three that each invent
   a layout read as three widgets stacked.
   -------------------------------------------------------------------------- */
.brandlist { display: flex; flex-direction: column; }

.brandlist__item + .brandlist__item { border-top: 1px solid #f1eef6; }

.brandlist__link {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding-block: 13px;
  transition: transform .25s var(--ease);
}
.brandlist__item:first-child .brandlist__link { padding-top: 0; }
.brandlist__item:last-child  .brandlist__link { padding-bottom: 0; }
.brandlist__link:hover { transform: translateX(4px); }   /* RTL: nudges start-ward */

/* Fixed box + contain rather than a width: these five marks run from 1.08 to
   1.52 in aspect, so sizing on width alone would leave the squarer ones
   towering over the wider ones. A shared height is what lines them up down
   the column — the thing the eye actually reads as alignment. */
/* A step up from the other two lists' artwork on purpose: these are the
   company's own marks, and at 60×38 they were reading as thumbnails beside
   the news photos rather than as logos. Held to 74×48 — enough to be
   recognised, not enough to outweigh the article the rail sits beside. */
.brandlist__logo {
  display: block;
  overflow: hidden;                    /* contains the hover scale */
  width: 74px;
  height: 48px;
}
/* Sized to the box outright rather than capped with `max-height: 100%`.
   That cap resolves against the grid *row*, which is an implicit auto track
   — indefinite as far as percentage resolution goes — so it was being
   dropped, and the tallest marks (Barleta at 1.08, Sundis at 1.16) rendered
   at intrinsic size and spilled across the row rule beneath them. Giving the
   image the box and letting `contain` letterbox inside it cannot overflow,
   whatever aspect the next logo arrives in. */
.brandlist__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.brandlist__link:hover .brandlist__logo img { transform: scale(1.06); }

.brandlist__body { display: block; min-width: 0; }

.brandlist__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--purple);
  transition: color .25s var(--ease);
}
.brandlist__link:hover .brandlist__name { color: var(--gold); }

/* One line, clamped. The descriptions are short enough to fit, but a longer
   one added later would otherwise push its row out of step with the rest and
   break the alignment the fixed logo box was set up to hold. */
.brandlist__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   8. Previous / next
   -------------------------------------------------------------------------- */
.adjacent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 96px;
}

.adjacent__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 28px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 35px 14px;
  background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.adjacent__card:hover {
  border-color: rgb(187 167 96 / .6);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(68, 47, 114, .35);
}

/* "Next" is aligned to the opposite edge so the pair reads outward from the
   centre — the arrows then point the way the reader is actually going. */
.adjacent__card--next { text-align: start; }
.adjacent__card--next .adjacent__label { margin-inline-start: auto; }

.adjacent__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
}
.adjacent__label svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.adjacent__card--prev:hover .adjacent__label svg { transform: translateX(3px); }
.adjacent__card--next:hover .adjacent__label svg { transform: translateX(-3px); }

.adjacent__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   9. Comments
   -------------------------------------------------------------------------- */
.comments { padding-bottom: 110px; }

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 56px;
}

.comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 32px 14px;
  background: #fff;
}

.comment__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 10px;
  background: rgb(187 167 96 / .14);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}
/* The brand's own replies invert to purple, so an official answer is
   distinguishable at a glance without reading the badge. */
.comment__avatar--brand { background: var(--purple); color: #fff; }

/* A grid item defaults to min-width:auto, so one long unbroken string — a
   pasted URL in a comment — would push the column wider than its track and
   take the card with it. min-width:0 lets the track hold its size. */
.comment__body { min-width: 0; }

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.comment__name { font-size: 15.5px; font-weight: 700; color: var(--purple); }
.comment__badge {
  padding: 3px 10px;
  border-radius: 999px 999px 999px 4px;
  background: rgb(187 167 96 / .16);
  font-size: 11.5px;
  font-weight: 500;
  color: #7a6a2f;                      /* gold, darkened to clear 4.5:1 on its own tint */
}
/* --grey-400 is the system's metadata grey, but it measures 2.85:1 on white
   and this is 12.5px type — below the 4.5:1 the design system itself sets.
   --grey-600 is the next token up at 5.74:1, so the step down from the name
   is carried by size and weight instead of by a colour that can't be read. */
.comment__date { font-size: 12.5px; font-weight: 300; color: var(--grey-600); }

.comment__text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--grey-600);
}

.comment__reply {
  margin-top: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
  transition: color .2s var(--ease);
}
.comment__reply:hover { color: var(--purple); }

/* The reply thread hangs off the parent's second column so it lines up under
   the comment it answers, not under the avatar. */
.comment__replies {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.comment--reply {
  padding: 20px 22px;
  border-color: transparent;
  border-radius: 12px 12px 26px 12px;
  background: #faf9fc;
}

/* -- comment form ---------------------------------------------------------- */
.comment-form {
  padding: 40px 42px 38px;
  border: 1px solid #ece8f2;
  border-radius: 16px 16px 44px 16px;
  background: #fff;
  box-shadow: 0 30px 70px -46px rgba(30, 16, 60, .28);
}
.comment-form__title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
}
.comment-form__lead {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-600);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}
.field { display: block; }
.field + .field { margin-top: 20px; }
.field-grid .field { margin-top: 0; }

.field__label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.field__label em { color: var(--gold); font-style: normal; }

.field__input {
  width: 100%;
  padding: 13px 16px;
  border: 1.4px solid #e5e0eb;
  border-radius: 10px;
  background: #fbfafd;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--grey-400); }
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(187 167 96 / .18);
}
/* The ring above is enough for a pointer, but a keyboard user needs a real
   outline — the global :focus-visible rule in style.css is restored here
   because the :focus rule above would otherwise have removed it. */
.field__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.field__textarea { resize: vertical; min-height: 138px; }

.comment-form__submit {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 15px 30px;
  border-radius: 999px 999px 999px 10px;
  background: var(--gold);
  color: var(--purple);
  font-size: 16px;
  font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.comment-form__submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.comment-form__submit:hover { background: var(--purple); color: #fff; }
.comment-form__submit:hover svg { transform: translate(2px, -2px); }
.comment-form__submit:active { transform: scale(.97); }

.comment-form__note {
  margin-top: 16px;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.comment-form__note.is-error { color: #b0304a; }

/* --------------------------------------------------------------------------
   10. Footer row
   .site-footer__inner is markup this page shares with the others but which
   style.css never gives a layout — the footer there relies on its children's
   own margins. Stated here so the row is explicit rather than incidental.
   -------------------------------------------------------------------------- */
.site-footer__inner { display: block; }

/* --------------------------------------------------------------------------
   11. Responsive
   Same breakpoints as style.css — no new ones introduced.
   -------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  /* The headline needs no step here: clamp(28px, 3.3vw, 52px) is already
     tracking the viewport, so it comes down on its own. */
  .article-body__grid { grid-template-columns: minmax(0, 1fr) 312px; gap: 38px; }
}

@media (max-width: 1200px) {
  .factlist { gap: 24px; }
  .factlist__item { padding-inline-start: 24px; }
  .article-body__grid { grid-template-columns: minmax(0, 1fr) 288px; gap: 32px; }
  .prose { font-size: 16.5px; }
  .sub { font-size: 24px; }
  .pullquote p { font-size: 19px; }
}

@media (max-width: 1024px) {
  /* Matches the home hero's pattern at this breakpoint (style.css ≤1024:
     170px / .55) so every page reads as one system. */
  .page-hero { min-height: clamp(440px, 66vh, 600px); padding-block: var(--hero-top) 76px; }
  .page-hero__pattern { width: 170px; opacity: .55; }

  .article-head__title { max-width: min(100%, 660px); }
  /* Nothing sits opposite the headline at this width for the credit to
     balance against, and over a narrow photo it crowds the corner. */
  .page-hero__credit { display: none; }

  /* The fact bar stops fitting on one line: the author keeps the top row and
     the facts wrap beneath, which is the order they'd be read in anyway. */
  .factbar { margin-top: -32px; }
  .factbar__inner { flex-wrap: wrap; gap: 18px 24px; padding: 20px 24px; }
  .factlist { margin-inline-start: 0; width: 100%; order: 3; gap: 20px; }
  .factlist__item { padding-inline-start: 20px; }
  .byline__share { margin-inline-start: auto; padding-inline-start: 0; }
  .byline__share::before { display: none; }

  /* One column: a 288px rail alongside a 16px measure leaves neither enough.
     The most-read list drops under the article, where it reads as a proper
     "what to read next" block — and it stops being sticky, because there is
     nothing left for it to stick beside. */
  .article-body { padding-block: 64px 72px; }
  .article-body__grid { grid-template-columns: 1fr; gap: 56px; }
  .prose { max-width: none; }
  /* Nothing left to stick beside once the column is gone. */
  .rail__inner { position: static; }

  /* The rail is full width once the column stacks, so the five rows can run
     two abreast instead of down a single narrow strip. */
  .brandlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .brandlist__item + .brandlist__item { border-top: 0; }
  .brandlist__item { border-top: 1px solid #f1eef6; }
  .brandlist__item:nth-child(-n+2) { border-top: 0; }
  .brandlist__link,
  .brandlist__item:first-child .brandlist__link,
  .brandlist__item:last-child .brandlist__link { padding-block: 12px; }

  .adjacent { padding-bottom: 72px; }
  .comments { padding-bottom: 80px; }
  .comment-form { padding: 32px 30px 30px; }
}

@media (max-width: 620px) {
  /* Same pattern size as the home hero on mobile (style.css ≤620: 100px / .4).
     The hero is measured in vh here rather than px: on a phone the photograph
     has to leave room for the headline over it, and 62vh does that on a tall
     screen and a short one alike. */
  .page-hero { min-height: 62vh; padding-block: var(--hero-top) 56px; }
  /* At this width the ornament's rule overflows the column by design — the
     motif has to reach the reading edge to stay legible — so it crosses the
     corner pattern's 100px band. The rule is content; the pattern is texture,
     so the pattern is the one that gives way. */
  .page-hero__pattern { width: 100px; opacity: .22; }
  /* Weighted harder at the foot: on a narrow crop the headline covers much
     more of the frame, so it needs more ground under it. */
  .page-hero__scrim {
    background: linear-gradient(to bottom,
      rgba(43, 26, 78, .82)  0%,
      rgba(43, 26, 78, .38) 24%,
      rgba(43, 26, 78, .68) 62%,
      rgba(26, 13, 62, .95) 100%);
  }

  .breadcrumb { font-size: 12.5px; gap: 5px; }
  .breadcrumb__sep { width: 13px; height: 13px; }

  .article-head__tag { padding: 5px 13px; font-size: 12.5px; }
  .article-head__title { max-width: none; margin-top: 14px; line-height: 1.45; }

  /* Stacked, each row on the reading edge. The dividers go with the row
     layout — a vertical rule between things sitting one above the other
     divides nothing. */
  .factbar { margin-top: -26px; }
  .factbar__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 18px 16px; border-radius: 12px 12px 30px 12px; }
  .byline__avatar { width: 44px; height: 44px; font-size: 18px; }
  .factlist { flex-wrap: wrap; gap: 14px 22px; padding-top: 14px; border-top: 1px solid #ece8f2; }
  .factlist__item { padding-inline-start: 0; }
  .factlist__item::before { display: none; }
  .factlist dd { font-size: 14px; }
  .byline__share { margin-inline-start: 0; padding-top: 14px; border-top: 1px solid #ece8f2; }
  .byline__share-label { margin-inline-end: auto; }

  .article-body { padding-block: 44px 52px; }
  .article-body__grid { gap: 44px; }

  /* Long-form on a phone: the size comes down but the leading stays open —
     a narrow measure needs the line spacing more, not less. */
  .prose { font-size: 16px; line-height: 2; }
  .prose__lead { font-size: 17.5px; }
  .prose p { margin-bottom: 22px; }

  .sub { font-size: 20px; margin: 40px 0 18px; gap: 10px; }
  .sub__mark { width: 18px; height: 18px; }
  /* The trailing rule is dropped: on a narrow column the heading uses the
     whole width, so the rule would be a 24px stub rather than a run. */
  .sub::after { display: none; }
  .sub > span { max-width: none; }

  .keypoints { padding: 22px 20px 20px; border-radius: 12px 12px 28px 12px; }
  .keypoints__list li { font-size: 15px; }

  .pullquote { margin: 34px 0; padding: 28px 24px 24px; border-radius: 14px 14px 34px 14px; }
  .pullquote p { font-size: 17.5px; line-height: 1.9; }

  .prose-figure { margin: 30px 0; }
  .prose__foot { margin-top: 34px; padding-top: 24px; }
  .tags a { padding: 10px 14px; font-size: 13px; }

  .rail__inner { padding: 22px 18px 20px; border-radius: 14px 14px 32px 14px; }
  .rail__title { font-size: 16.5px; margin-bottom: 18px; }
  .popular__link { grid-template-columns: auto 58px minmax(0, 1fr); gap: 10px; padding-block: 12px; }
  .popular__thumb { width: 58px; height: 46px; }
  .popular__title { font-size: 13.5px; }

  .rail__block + .rail__block { margin-top: 24px; padding-top: 22px; }
  .news { gap: 14px; }
  .news__link { grid-template-columns: 66px minmax(0, 1fr); gap: 11px; }
  .news__thumb { width: 66px; height: 52px; }

  /* Stacked rather than side by side: two cards at ~140px each would clip
     both titles to a single line and lose the point of showing them. */
  .adjacent { grid-template-columns: 1fr; gap: 14px; padding-bottom: 52px; }
  .adjacent__card { padding: 20px 20px 22px; }
  .adjacent__title { font-size: 15.5px; }

  /* Back to a single column on a phone: two abreast leaves the description
     about 90px, which is narrower than the line needs to be worth printing. */
  .brandlist { display: flex; }
  .brandlist__item:nth-child(-n+2) { border-top: 1px solid #f1eef6; }
  .brandlist__item:first-child { border-top: 0; }
  .brandlist__link { grid-template-columns: 66px minmax(0, 1fr); gap: 13px; }
  .brandlist__logo { width: 66px; height: 42px; }

  .comments { padding-bottom: 64px; }
  .comment { padding: 20px 18px; gap: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .comment__avatar { width: 40px; height: 40px; font-size: 16px; }
  .comment__text { font-size: 14.5px; }
  /* At this width the indent costs more than the nesting communicates, so
     the reply lines up with its parent and the avatar carries the relation. */
  .comment__replies { grid-column: 1 / -1; margin-top: 16px; }
  .comment--reply { padding: 16px 16px; }

  .comment-form { padding: 26px 20px 24px; border-radius: 14px 14px 34px 14px; }
  .comment-form__title { font-size: 19px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  /* 16px is the threshold below which iOS Safari auto-zooms a focused field —
     the one size here that is not a visual choice. */
  .field__input { font-size: 16px; }
  .comment-form__submit { width: 100%; justify-content: center; }
}